JS读写CSS样式的方法汇总

为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！

一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式
如：var elm = document.getElementById('test');
      elm.style.color = 'black';

二、通过Element对象的getAttribute()、setAttribute()、removeAttribute()直接读写style属性
 如：elm.setAttribute('style','color:red;line-height:30px');

三、通过CSSStyleDeclaration对象的cssText属性和setProperty()、removeProperty等方法
如：

 elm.style.cssText ='color:red;line-height:30px'; elm.style.removeProperty('color'); elm.style.setProperty('color', 'green', 'important'); elm.style.cssText = ''; //快速清空该规则的所有声明

每一条CSS规则的样式声明部分（大括号内部的部分），都是一个CSSStyleDeclaration对象，它的属性和方法：
属性：
1.cssText：当前规则的所有样式声明文本。该属性可读写，即可用来设置当前规则。
2.length：当前规则包含多少条声明。
3.parentRule：包含当前规则的那条规则，同CSSRule接口的parentRule属性。
方法：
1.getPropertyPriority()方法返回指定声明的优先级，如果有的话，就是“important”，否则就是空字符串；
2.getPropertyValue方法返回指定声明的值；
3.item(index)方法返回指定位置的属性名，一般用[index]语法更直接；
4.removeProperty方法用于删除一条CSS属性，返回被删除的值；
5.setProperty方法用于设置指定的CSS属性，没有返回值;

四、利用document.styleSheets属性，返回当前页面的所有StyleSheet对象（即所有样式表），它是一个只读的类数组对象，它的元素是CSSStyleSheet对象(继承自StyleSheet对象)，该对象的属性方法如下：
属性：
1.cssRules类数组对象，元素是样式表中CSS规则CSSStyleRule对象；IE9以下为rules；
2.disabled属性用于打开或关闭一张样式表，值为true或disabled；
3.ownerNode属性返回StyleSheet对象所在的DOM节点，通常是或