欢迎来到福编程网,本站提供各种互联网专业知识!

JS读写CSS样式的方法汇总

发布时间:2016-08-16 作者:苏福 来源:转载
这篇文章主要为大家详细汇总了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节点,通常是