如何：动态切换css页面

Question

我正在为服务器存储空间非常有限的嵌入式设备开发网页。 我希望用户能够在网页的日间模式和夜间模式查看之间切换。 为此，我只想使用单击按钮的不同网页加载页面。 我不想每页都有两份，因为我没有足够的空间。 有没有办法切换到不同的 css 页面或以某种方式动态加载 css？ 我只能使用 html 和 javascript。 没有 PHP 或 asp.net。

Answer 1

这里是 go 普通 javascript：

JS：

function change_css(){
    var oLink = document.createElement("link") 
    oLink.href = "new_css.css"; //new css filename
    oLink.rel = "stylesheet"; 
    oLink.type = "text/css"; 
    document.body.appendChild(oLink);
}

HTML：

<button onclick="change_css()" value="css change"/>

Answer 2

让我争论一些更简单的事情：

1：一个CSS：

.day {
  color: black;
  background-color: white;
}

.night {
  color: white;
  background-color: black;
}

.day #content {
  color: blue;
}

.night #content{
  color: red;
}

2：一个HTML：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dayornight.css">
  </head>
  <body class="day">
    <div id="content">
        <a>Hello World!</a>
    </div>
  </body>
</html>

3：一小块 JavaScript 或 jQuery 代码绑在按钮上，该按钮从白天到晚上切换身体标签上的 class。

如您所见，如果您在浏览器中打开此示例，更改 class 不仅会更改主体的 CSS 样式，还可以移动包含的项目，因为它们的选择器现在匹配不同。

如何：动态切换css页面

问题描述

2 个解决方案

解决方案1
2 2011-05-26 16:30:44

解决方案2
2 已采纳 2011-05-26 16:49:28

如何：动态切换css页面

问题描述

2 个解决方案

解决方案1 2 2011-05-26 16:30:44

解决方案2 2 已采纳 2011-05-26 16:49:28

解决方案1
2 2011-05-26 16:30:44

解决方案2
2 已采纳 2011-05-26 16:49:28