0

如何使用 CSS 在我的 HTML 网站上创建和加载配色方案？

我有 base.css green.css 和 orange.css。现在，加载站点时默认配色方案是绿色，但是如何在客户端将其更改为 orange.css？

我希望每个用户选择适合他的配色方案。此外，必须保存该选择以供此人下次访问现场。IPBoard 皮肤中的类似内容（称为“颜色主题”的功能）http://www.skinbox.net/skins/velvet/

4

4 回答 4

1

如果您希望在前端交换样式表，并希望保存首选项，您可以执行以下操作（为简单起见使用 jQuery）：

在里面<head>

<link  id='theme'  href='green.css' type='text/css' />

在里面<body>

<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>

在 javascript 文件中

$(document).ready(function(){

    if( localStorage.theme )
        $('link#theme').attr('href', localStorage.theme);

    $('#orange').click(function(){
        $('link#theme').attr('href', "orange.css");
        localStorage.theme = "orange.css;"
    })

    $('#green').click(function(){
        $('link#theme').attr('href', "green.css");
        localStorage.theme = "green.css;"
    })

});

上面的代码将输出两个链接，它们在点击时切换 CSS 文件的位置，从而改变主题。它还将最后选择的主题保存在 localStorage 中，以便记住它。

于 2013-05-20T23:16:23.940 回答
0

一般来说，您应该在服务器端执行此操作 - 使用 cookie 或会话（和/或它们后面的数据库表）记住首选项，然后在 HTML 中生成正确的样式表引用。

IPB 在内部也这样做，它将您的首选项存储在数据库表中，然后<link rel="stylesheet">在其模板引擎中呈现正确的元素。

或者，您可以完全在 Javascript 中完成，按需加载样式表，但这既是一个高级主题，通常也是一个可靠的服务器端实现的劣质解决方案。

于 2013-05-20T23:06:53.057 回答
0

如果尚未设置，您可以在加载索引页面时将默认的 css 颜色方案文件路径存储在 cookie 中。

然后，当您声明您的 css 文件时，只需执行；

<link rel="stylesheet"  href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />

然后，您可以有一个更改主题按钮，单击该按钮将访问该 cookie 值并将其更改为新的主题 css 文件路径。

于 2013-05-20T23:10:12.237 回答
0
  1. 使用 Javascript 加载选择性 css onClick。
    或者
  2. 使用 jQuery 更改鼠标点击的配色方案。
于 2013-05-20T23:26:46.840 回答