如何通过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>