web页面中,利用js动态的改变div元素的class属性的值,可以实现很多的动态效果。比如动态修改div元素的背景颜色,改变字体的颜色等等。这篇文章就来说一说,javascript 如何获取和设置div元素class属性的值的方法。
js获取元素class属性值的方法
原生js如果想要获取div元素class属性的值,需要用到 className 方法
示例代码:
<div id="mochu" class="m m1"></div> <script> //获取class属性的值 var c = document.getElementById('mochu').className; console.log(c); </script>
打印结果:
m m1
js设置元素class属性值的方法
js中的className 方法不仅仅可以获取div元素class属性的值,还可以设置div元素的值
示例代码:
<div id="mochu" class="m m1"></div> <script> //设置class属性值 document.getElementById('mochu').className = 'mm'; </script>
运行后的效果如下:
注意:
使用 className 设置div元素属性值时,div元素原有的class属性值会被替换掉。