如何解决如何:动态切换CSS页面
| 我正在为服务器存储空间非常有限的嵌入式设备制作网页。我希望用户能够在白天模式和夜间模式之间切换网页。为此,我只想单击带有按钮的其他网页即可加载页面。我不想每个页面都有两个副本,因为我没有足够的空间。有没有办法切换到不同的CSS页面或以某种方式动态加载CSS?我只能使用html和javascript。没有PHP或asp.net。解决方法
让我为更简单的事情辩护:
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代码,可在白天到晚上之间切换body标签上的类。
如您所见,如果您在浏览器中显示此示例,则更改类不仅会更改主体的CSS样式,而且还可以移动所包含的项,因为它们的选择器现在匹配不同。
,在这里,您可以使用普通的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\"/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。