Question

我想根据用户偏好更改页面样式。

页面将加载给定的样式，但如果用户单击按钮，页面布局应该更改。如果再次单击，则样式应更改回原始样式。更改很大（大约70个CSS行），但只更改页面的特定部分。

我可以编写一个JavaScript函数来修改所有相关标签的CSS样式，但这样做会很乏味，并且会在我的代码中引入太多的CSS。如果可以的话，我宁愿把它保存在CSS文件中。

我还可以在CSS文件中添加样式A，并在所有相关标签中引用类A，并将样式B添加到CSS文件中，并引用类{ {1}}在所有相关标签中。然后，JavaScript代码只需更改相关标签上的类。

最好的方法是什么？

Answer 1

要实现此目的，您可以在body（或更相关的父对象）上切换类，然后将CSS修改为基于此类。这样，所有UI都只受到一行JS代码的影响。例如：

$('#foo').click(function() {
    $('body').toggleClass('foobar');
});

.example {
    background-color: red;
}

body.foobar .example {
    background-color: blue;
}

Answer 2

你可以做这样的事情，没有脚本，只有CSS，而且非常容易实现，也很容易有多个布局来切换。

.toggle {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  background: #eee;
  margin-bottom: 20px;
}
#toggle, #toggle2 {
  display: none;
}

#toggle:checked ~ label[for=toggle],
#toggle2:checked ~ label[for=toggle2] {
  background: #aaa;
}

#toggle:checked ~ .container {
  display: none;
}

#toggle2:checked ~ .container img:last-child {
  display: none;
}

<input id="toggle" type="checkbox">
<label for="toggle" class="toggle">
  Toggle
</label>
<input id="toggle2" type="checkbox">
<label for="toggle2" class="toggle">
  Toggle 2
</label>

<div class="container">
  
    <img src="http://placehold.it/200x200" alt="">
    <img src="http://placehold.it/200x200" alt="">
    <img src="http://placehold.it/200x200" alt="">

</div>

Answer 3

您也可以查看类似的内容。点击后，您可以添加/删除其他css文件的链接。

var ss = document.createElement("link")
ss.type = "text/css"
ss.rel = "stylesheet"
ss.href = "style.css"
document.getElementsByTagName("head")[0].appendChild(ss);

应用并删除大型CSS样式部分

3 个答案: