Question

我是一名新手程序员，一名对设计知之甚少的大学生。我正在开发像twitter这样的微博客网站，我想使用像twitter这样的预加载样式（或主题），我看到一个具有相同功能的网站的页面源，他们似乎没有使用不同的CSS文件可能是我没有做对。我的问题是，我该如何将其应用到我的网站？请从基本描述，因为我对这些事情知之甚少！在此先感谢。！

Answer 1

好吧，首先你需要让你的用户能够做一些改变。让我们说你已经有了。

您需要的是一个基本CSS文件，其中包含您允许用户指定的所有规则和样式（或者有一些默认值）。

用户指定规则后，生成一个css文件，将其存储在用户文件夹（或数据库中，但我不建议这样做），然后加载css除了你拥有的基本css文件，当有人登录用户的个人资料。

Answer 2

你可能有一个中央CSS文件定义了一堆不会改变的东西，然后是一个提供“主题”的辅助CSS文件。你将有几个辅助文件，每个主题一个。构建页面时，只为其中一个文件包含link元素。

如果您想允许即时更改主题，可以通过更改href元素的link来实现。

例如，如果我们假设link是这样的：

<link id="themeStyle" href="green.css" rel="stylesheet">

然后这段代码改变了它：

document.getElementById("themeStyle").href = "blue.css":

完整示例：Live Copy | Source

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link id="themeStyle" href="/acofoy/1" rel="stylesheet">
</head>
<body>
  <div id="group">
  <div><label><input name="theme" type="radio" value="1" checked>Green</label></div>
  <div><label><input name="theme" type="radio" value="2">Blue</label></div>
  <div><label><input name="theme" type="radio" value="3">Red</label></div>
  </div>
</body>
</html>

JavaScript的：

(function() {

  var buttons = document.getElementById("group").getElementsByTagName("input");
  var index;

  for (index = 0; index < buttons.length; ++index) {
    buttons[index].onclick = setStyle;
  }

  function setStyle() {
    document.getElementById("themeStyle").href = "/acofoy/" + this.value;
  }

})();

注意：我使用数字代替值而不是名字，因为我使用的是JSBin。当然，在现实生活中，我会使用名称（green.css，blue.css，red.css等。）

如何应用像twitter这样的可切换主题？

2 个答案: