用原生JS读写CSS样式的方法总结(1)

  一、可以通过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节点,通常是<link>或<style>。对于那些由其他样式表引用的样式表,该属性为null;                 4.因为CSS的@import命令允许在样式表中加载其他样式表,就有了parentStyleSheet属性,它返回包括了当前样式表的那张样式表。如果当前样式表是顶层样式表,则该属性返回null;                 5.type属性返回StyleSheet对象的type值,通常是text/css;                 6.title属性返回StyleSheet对象的title值;                 7.href属性是只读属性,返回StyleSheet对象连接的样式表地址。对于内嵌的style节点,该属性等于null;                 8.media属性表示这个样式表是用于屏幕(screen),还是用于打印(print),或两者都适用(all),该属性只读,默认值是screen;         方法:deleteRule()从样式表中删除一条规则,insertRule()向样式表中插入一条新规则,IE9以下为addRule()、removeRule();            如: document.styleSheets[0].insertRule('#test:hover{color: white;}',0);      document.styleSheets[0].deleteRule(0); //删除样式表中的第一条规则      document.styleSheets[0].cssRules[1].selectorText; //返回选择器字符串      document.styleSheets[0].cssRules[1].cssText; //返回规则字符串,含选择器      document.styleSheets[0].cssRules[1].style.border;      document.styleSheets[0].cssRules[1].style.cssText; //返回当前规则的所有样式声明字符串
上一篇:过滤敏感词案例


下一篇:document.styleSheets