Xeo*_*eos 56 html javascript css jquery
我有一个页面,<link>在标题中加载了名为的CSS light.css.我还有一个名为的文件dark.css.我想要一个按钮来交换页面的样式(css文件中有40个选择器,有些在两个文件中不匹配).
如何删除对light.cssJS的引用并删除所有应用的样式,然后dark.css从中加载并应用所有样式？我不能简单地重置所有元素,因为一些样式是通过不同的css文件应用的,有些是由JS动态生成的.没有重新加载页面,有没有一种简单而有效的方法呢？香草JS是首选,但我会使用jQuery进行后续处理,所以jQ也没关系.
sam*_*sam 73
您可以在文档中包含所有样式表,然后根据需要激活/停用它们.
在我阅读规范时,您应该能够通过将其disabled属性从true 更改为false来激活备用样式表,但只有Firefox似乎才能正确执行此操作.
所以我认为你有几个选择:
rel=alternate<link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark">
<script>
function enableStylesheet (node) {
node.rel = 'stylesheet';
}
function disableStylesheet (node) {
node.rel = 'alternate stylesheet';
}
</script>
disabled<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate">
<script>
function enableStylesheet (node) {
node.disabled = false;
}
function disableStylesheet (node) {
node.disabled = true;
}
document
.querySelectorAll('link[rel=stylesheet].alternate')
.forEach(disableStylesheet);
</script>
media=none<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark">
<script>
function enableStylesheet (node) {
node.media = '';
}
function disableStylesheet (node) {
node.media = 'none';
}
</script>
您可以使用getElementById,querySelector等选择样式表节点.
(避免非标准<link disabled>.虽然设置HTMLLinkElement#disabled是好的.)
Mat*_*son 54
您可以创建一个新链接,并用新链接替换旧链接.如果将它放在一个函数中,您可以在需要的地方重用它.
Javascript:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
HTML:
<html>
<head>
<title>Changing CSS</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
</head>
<body>
<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
</body>
</html>
为简单起见,我使用了内联javascript.在制作中,您可能希望使用不显眼的事件侦听器.
如果在link元素上设置ID
<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>
你可以用Javascript来定位它
document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';
要不就..
document.getElementById('stylesheet').href='stylesheet2.css';
这是一个更彻底的例子:
<head>
<script>
function setStyleSheet(url){
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}
</script>
<link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
<a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
<a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>
使用jquery你绝对可以交换css文件.按下按钮执行此操作.
var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');
或者作为山姆的答案,这也有效.这是jquery语法.
$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);
这个问题已经很老了但是我建议一种这里没有提到的方法,你将在HTML中包含两个CSS文件,但CSS会像
light.css
/*** light.css ***/
p.main{
color: #222;
}
/*** other light CSS ***/
和dark.css会是一样的
/*** dark.css ***/
.dark_layout p.main{
color: #fff;
background-color: #222;
}
/*** other dark CSS ***/
basicall在dark.css中的每个选择器都将是一个孩子 .dark_layout
然后,如果有人选择更改网站的主题,您需要做的就是更改body元素的类.
$("#changetheme").click(function(){
$("body").toggleClass("dark_layout");
});
现在,一旦用户点击,您的所有元素都将具有暗css #changetheme.如果您使用任何类型的CSS预处理器,这很容易做到.
您还可以为背景和颜色添加CSS动画,这使得过渡非常平滑.
| 归档时间： |
|
| 查看次数： |
70070 次 |
| 最近记录： |