原生javascript实现读写CSS样式的方法详解
前言
可能大家一说起操作css样式，很多人都会想到jQuery的css方法：$(selector).css(name)，但是有思考过如何使用原生js来实现类似的功能么？
大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了，但是这个方法只能获取和修改html文档中的内联样式，无法操作非内联样式（内部样式和外部样式表）。
我通过搜索和整理，总结了使用原生js对css样式的读写实现。下面话不多说，来看看详细的介绍吧。
获取样式
1.domstyle
这个方法只能获取内联样式：
vartext=document.getElementById('text');
vartextColor=text.style.color;
//得到textColor的值为'#000'
2.currentStyle
这个方法只适用于IE浏览器，在形式上与element.style相近，区别在于正如currentStyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的CSS属性值，包括了内部style标签里的样式和外部引入的css文件。
用法：元素.currentStyle.属性
比如我们要获取id为box的width：
varboxWidth=document.getElementById('box').currentStyle.width;
//得到boxWidth的值为'200px'
3.getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([objectCSSStyleDeclaration])，并且是只读的。
在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari
用法：getComputedStyle(元素,伪类).属性，第二个参数如果不是伪类就设置为null吧。
varel=document.getElementById("box");
varstyle=window.getComputedStyle(el,":after");
来～封装一个通用的获取样式的函数
为了适用于各大主流浏览器，我们来写一个函数：
//这个函数需要传递两个参数：元素对象和样式属性名称
functiongetStyle(el,styleName){
if(el.currentStyle){
//forIE
returnel.currentStyle[styleName];
}else{
//forpeace
returngetComputedStyle(el,false)[styleName];
}
}
接着调用这个函数来获取box的宽度：
varbox=document.getElementById("box");
varboxWidth=getStyle(box,'width');
这个函数并没有考虑到对伪类的相关操作，可以根据需要自行扩展～
getComputedStyle与style的区别？
既然都是获取样式属性的值，它们有啥区别呢：
只读与可写
getComputedStyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。
获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192,IE9:195,Chrome:253,不同环境结果可能有差异),而element.style就是0。
引用自——张鑫旭博客文章
设置样式
1.domstyle
这个不用说了吧，比如把元素的背景颜色改为红色：
varel=document.getElementById('box');
el.style.backgroundColor='red';
2.cssText属性
cssText的本质就是设置HTML元素的style属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个CSS样式表，去掉了包围属性和值的元素选择器的花括号。
它的用法和innerHTML类似：document.getElementById("d1").style.cssText="color:red;font-size:13px;";
详细请参考：CSSRule.cssText-WebAPIs|MDN
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。谢谢大家对毛票票的支持。