如何通过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 ,第二个是classListclassName在所有的浏览器中都可以工作,但在修改元素的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>