DOM操作之CSS操作

标签：led   名称   设置   ssr   font   sheet   指定元素   span   doc   

操作行内样式

　　写法：元素节点.style          

　　　　得到该元素节点的CSS样式声明对象;CSSStyleDeclaration

　　　　元素节点.style.样式名            -->获取或设置指定元素的样式

 　　注:在通过元素节点.style.样式名 来获取或设置元素节点样式的时候,如果样式属性带中划线(font-size;backgournd-color),样式名写法：fontSize backgroundColor；

　　　　元素节点.style.样式名 是用来操作行内样式,如果不是行内样式,则获取不到,但是可以设置(因为行内样式优先级高于内部和外部)

　　CSSStyleDeclaration对象的属性和方法

 　　　　cssText          用来获取css样式的文本内容

　　　　length           用来获取当前样式对象的所有样式个数

　　如果是复合属性,那么该复合属性相关的样式都会存在个数里面

　　item(下标)   获取当前样式对象中指定的样式名称

　　getPropertyValue(“样式名”)   获取指定样式的值

　　setProperty(“样式名”,”样式值”,””)              设置指定样式的值

　　removeProperty(“样式名”)            删除指定样式

 　　元素节点.style.样式名 和 元素节点.style.getPropertyValue(“样式名”)区别？

 　　　　都是获取指定元素的指定样式的值;

　　　　元素节点.style.样式名写的时候,对于有中划线的样式,需要删除中划线,比如font-size    -->fontSize

　　　　元素节点.style.getPropertyValue(“样式名”)参数直接写样式名即可;

真正的操作内部或外部样式　

　　1.内部样式在style标签中,外部样式在link标签引入的,需要先获取到style标签或者是link标签　　

　　　　//获取link标签

　　　　var linkEle = document.getElementsByTagName("link")[0];

　　　　//获取style标签

　　　　var styleEle = document.getElementsByTagName("style")[0];

　　2.把获取到的link标签元素或者style标签元素转换为CSSStyleSheet对象元素节点.sheet         -->CSSStyleSheet

　　　　var linkSheetObj = linkEle.sheet;

　　　　var styleSheetObj = styleEle.sheet;

 3.CSSStyleSheet对象的属性和方法

　　　　disable                 获取或设置内部或外部样式是否禁用,值是boolean类型

　　　　如果该属性的值默认是false,表示不禁用;如果设置为true,则表示禁用该样式规则;

　　　　cssRules       　　 获取内部或外部的样式规则集合,返回值是CSSRuleList

　　　　removeRule(下标)     删除指定下标的样式规则

　　　　insertRule(“样式规则”,下标)  把指定样式规则插入到内部或外部样式中

 　　　　 var linkRules = linkSheetObj.cssRules;
  　　      var styleRules = styleSheetObj.cssRules;

　　4.可以通过下标获取到某个指定的样式规则

　　　　CSSRuleList[下标]             -->CSSStyleRule 单条样式规则

　　　　CSSStyleRule 对象的属性和方法:

　　　　　　cssText          获取单条样式规则的文本内容

　　　　　　selectorText        获取样式规则的选择器名称

　　　　　　style                     获取单条样式规则的样式对象,CSSStyleDeclaration

DOM操作之CSS操作

标签：led   名称   设置   ssr   font   sheet   指定元素   span   doc   

原文地址：http://www.cnblogs.com/Judges/p/7191282.html