通过DOM对象获取修改CSS样式class
⽂章⽬录
通过DOM对象获取/修改CSS样式
1.获取 & 修改内联样式
对于⼀个元素结点来说，内联样式style就是元素结点的⼀个属性节点。
可以通过element.style.XXX来获取这个元素结点的内联样式；同时，也可以通过element.style.XXX = YYY修改内联样式。例1：尝试获取样式
<style type="text/css">
#main{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
var main = ElementById("main");
console.log(main.backgroundColor);
};
</script>
<body>
<div id="main">
</div>
</body>
例2：修改内联样式
<style type="text/css">
#main{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
var main = ElementById("main");
console.log(main.style.backgroundColor);
main.style.backgroundColor="yellowgreen";
console.log(main.style.backgroundColor);
};
</script>
<body>
<div id="main">
</div>
</body>
因为内联样式的优先级更⾼，所以内联样式设置的背景颜⾊⽣效。
同样，使⽤这样的⽅式并没有解决⼀个问题如何获得当前样式？
2. 获取当前样式
在实际的应⽤中，绝⼤多数的CSS样式都不是内联样式，因此想要获取元素结点的当前样式，不能使⽤element.style.XXX。下⾯介绍获取元素节点当前样式的⽅式。
IE8及以下不⽀持，其它⽀持：ComputedStyle(element)
这个⽅法返回element结点的所有样式所构成的⼀个对象，对象的字段名和CSS样式的属性名⼀致。
<style type="text/css">
#main{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
var main = ElementById("main");
console.ComputedStyle(main).backgroundColor);
};
</script>
<body>
<div id="main">
</div>
</body>
在上⾯的例⼦中，还企图通过这个属性修改样式，但是失败了，通过报错信息可以看到，这个属性是只读的，不能修改的。
仅IE浏览器⽀持：element.currentStyle.XXX
这个属性的⽤法和element.style.XXX类似，最⼤的不同点是，element.currentStyle.XXX是只读的属性，不能修改。
封装⼀个通⽤的⽅法
function getCurrentStyle(element, attrString){
var css = element.currentStyle || ComputedStyle(element);
return css[attrString];//通过"[]"访问对象的某个字段
}
3. 获取和修改class
如果要修改⼀个元素的CSS样式，处理直接通过内联样式之外，还可以通过修改元素的class属性，从⽽被不同的CSS样式修饰。
通过element.className获取/修改class属性
<head>
<script type="text/javascript">
var e = document.querySelector(".c1");
window.alert(e.className);
e.className ="c2";
};
</script>
</head>
<body>
<div class="c1">
</div>
</body>
在class属性中添加和删除样式
通过对className的操作，即可实现⼀个元素动态使⽤CSS样式。除了上⾯的直接修改的⽅式，还可以给className添加新的修饰。
例如，<div class="c1">，现在要在class中添加⼀个c2，只需要e.className += " c2"（注：c2前有⼀个空格）。执⾏完毕后，结果为<div class="c1 c2">
注意，在使⽤e.className += " c2"时，⼀定要判断e.className中是否有c2（可通过正则表达式），如果有c2，则没必要添加。
删除⼀个样式时，可以通过replace()⽅法和正则表达式，将要删除的样式替换为空串""，以达到删除的⽬的。
总结
要获取样式时，应该获取当前样式，⽽不是内联样式；cssclass属性
要修改样式时：
1. 直接修改内联样式。
2. 通过修改className达到修改样式的⽬的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。