操纵元素style样式属性
IE4.0为页面上所有元素引入了style属性。
DOM采纳了IE的作法,并形成标准。
每个css样式,style对象都包含了一个名称类似的属性。
一个单词的样式通常名称相同
两个单词的样式通常改为驼峰命名法。
只需要对style的相应属性赋值,就可以操纵其样式。
div1.style.border = "1px solid black "
Style对象提供cssText描述样式表属性
getPropertyValue(propertyName)
返回指定样式的值
参数为CSS样式的名称,如:background-color
getPropertyPriority(propertyName)
获取样式优先级
item(index)
返回指定索引的CSS属性名称,如:background-color
removeProperty(propertyName)
删除样式
setPropertyPriority(propertyName,val,priority)
设置优先级important或一个空字符串
操作外部样式表中的样式
style对象无法得到外部样式表的样式。
document.styleSheets得到所有样式表的集合。
DOM为样式表指定了一个称为cssRules的集合。
IE有一个名称为rules的集合。
//获取并操作外部样式表
var cssRules =
document.styleSheets[0].cssRules || (Sheets.文档下边样式表的集合)document.styleSheets[0].rules;
alert(cssRules[0].style.color);
//修改外部样式表
cssRules[1].style.backgroundColor = "red";
IE和DOM具有不同的处理方式
IE
在每个元素上提供currentStyle对象。
可以用currentStyle得到内部样式和外部样式规则属性。
currentStyle是只读属性。
DOM
document.defaultView.getComputedStyle(div,null).backgroundColor
很多浏览器不支持。
IE4.0为页面上所有元素引入了style属性。
DOM采纳了IE的作法,并形成标准。
每个css样式,style对象都包含了一个名称类似的属性。
一个单词的样式通常名称相同
两个单词的样式通常改为驼峰命名法。
只需要对style的相应属性赋值,就可以操纵其样式。
div1.style.border = "1px solid black "
Style对象提供cssText描述样式表属性
getPropertyValue(propertyName)
返回指定样式的值
参数为CSS样式的名称,如:background-color
getPropertyPriority(propertyName)
获取样式优先级
item(index)
返回指定索引的CSS属性名称,如:background-color
removeProperty(propertyName)
删除样式
setPropertyPriority(propertyName,val,priority)
设置优先级important或一个空字符串
操作外部样式表中的样式
style对象无法得到外部样式表的样式。
document.styleSheets得到所有样式表的集合。
DOM为样式表指定了一个称为cssRules的集合。
IE有一个名称为rules的集合。
//获取并操作外部样式表
var cssRules =
document.styleSheets[0].cssRules || (Sheets.文档下边样式表的集合)document.styleSheets[0].rules;
alert(cssRules[0].style.color);
//修改外部样式表
cssRules[1].style.backgroundColor = "red";
最终样式
IE和DOM具有不同的处理方式
IE
在每个元素上提供currentStyle对象。
可以用currentStyle得到内部样式和外部样式规则属性。
currentStyle是只读属性。
DOM
document.defaultView.getComputedStyle(div,null).backgroundColor
很多浏览器不支持。