如何通过JavaScript更改一个CSS类风格？
根据我正在阅读的书，最好是改变一个CSS，当你使用Javascript来改变CSS时，通过类。 但是，如何？ 有人可以给这个样本片段吗？
假设你有：
<div id="mydiv" class="oldclass">text</div> 和以下样式：
.oldclass { color: blue } .newclass { background-color: yellow }
你可以像这样在javascript中更改mydiv上的类：
document.getElementById('mydiv').className = 'newclass';
在DOM操作之后，您将留下：
<div id="mydiv" class="newclass">text</div>
如果你想添加一个新的CSS类而不删除旧的，你可以附加到它：
document.getElementById('mydiv').className += ' newClass';
这将导致：
<div id="mydiv" class="oldclass newclass">text</div>
我强烈推荐jQuery。 然后它变得如此简单：
$('#mydiv').addClass('newclass');
您不必担心删除旧的类，因为addClass（）只会附加到它。 你也有removeClass（）;
getElementById（）方法的另一个优点是可以用一行代码同时将其应用于多个元素。
$('div').addClass('newclass'); $('.oldclass').addClass('newclass');
第一个例子会将该类添加到页面上的所有DIV元素。 第二个例子将新类添加到当前具有旧类的所有元素。
由于所有主stream浏览器都支持 classList ，并且jQuery支持IE <9 （在2.x分支中，因为Stormblack指出了注释），所以考虑到这个HTML
<div id="mydiv" class="oldclass">text</div>
你可以舒适地使用这个语法：
document.getElementById('mydiv').classList.add("newClass");
这也将导致：
<div id="mydiv" class="oldclass newclass">text</div>
加上你也可以使用remove，toggle，contains方法。
使用className属性：
document.getElementById('your_element_s_id').className = 'cssClass';
document.getElementById("my").className = 'myclass';
有两种方法可以使用vanilla javascript来完成。 第一个是className ，第二个是classList 。 className在所有的浏览器中都可以工作，但在修改元素的class属性时可能很难处理。 classList是修改元素类的更简单的方法。
要直接设置一个元素的类属性， className是要走的路，否则要修改一个元素的类，使用classList更容易。
初始Html
<div id="ID"></div>
设置类属性
var div = document.getElementById('ID'); div.className = "foo bar car";
结果：
<div id="ID" class="foo bar car"></div>
添加一个类
div.classList.add("car");// Class already exists, nothing happens div.classList.add("tar");
注意：在添加它之前，不需要testing一个类是否存在。 如果需要添加一个类，只需添加它。 如果已经存在，则不会添加副本。
结果：
<div id="ID" class="foo bar car tar"></div>
删除课程
div.classList.remove("car"); div.classList.remove("tar"); div.classList.remove("car");// No class of this name exists, nothing happens
注意：就像add ，如果一个类需要被删除，删除它。 如果它在那里，它将被删除，否则什么都不会发生。
结果：
<div id="ID" class="foo bar"></div>
检查类属性是否包含特定的类
if (div.classList.contains("foo")) { // Do stuff }
切换一个类
var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed // classWasAdded is false since "bar" was removed classWasAdded = div.classList.toggle("bar"); // "bar" gets added // classWasAdded is true since "bar" was added
.toggle有第二个布尔参数，在我看来，是多余的，是不值得的。
有关classList更多信息，请查看MDN 。 它还包括浏览器兼容性，如果这是一个问题，可以通过使用Modernizr检测和填充如果需要解决。
您可能也有兴趣使用jQuery修改它： http : //api.jquery.com/category/css/
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").addClass(function(){ return "par" ; }); }); </script> <style> .par { color: blue; } </style> </head> <body> <div class="test">This is a paragraph.</div> </body> </html>
