首页 > 代码库 > 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操作