应用并删除一个大的CSS样式部分

Question

我想根据用户的喜好改变页面样式。

页面将以给定的样式加载，但如果用户单击按钮，页面布局将发生变化。如果他再次单击，样式应更改回原来的样式。更改很大(大约70行CSS )，但只更改页面的特定部分。

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

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

解决这个问题的最好方法是什么？

Answer 1

为了实现这一点，您可以在body (或更相关的父对象)上切换类，然后将您的CSS修改为基于这个类。这样，所有UI都只受1行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

您还可以在单击后检查类似this.And的内容，您可以将/删除链接添加/删除到另一个css文件。

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