首页 > 代码库 > DOM操作之CSS操作

DOM操作之CSS操作

操作行内样式

  写法:元素节点.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操作