DOM操纵样式表

最新推荐文章于 2018-09-03 23:53:23 发布

转载最新推荐文章于 2018-09-03 23:53:23 发布 · 211 阅读

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何通过JavaScript操纵HTML元素的样式属性，包括内联样式和外部样式表的修改方法。详细解释了style对象的使用，以及如何获取和设置CSS属性值。

操纵元素style样式属性

IE4.0为页面上所有元素引入了style属性。
DOM采纳了IE的作法，并形成标准。
每个css样式，style对象都包含了一个名称类似的属性。
一个单词的样式通常名称相同
两个单词的样式通常改为驼峰命名法。
只需要对style的相应属性赋值，就可以操纵其样式。
div1.style.border = "1px solid black "
Style对象提供cssText描述样式表属性

Dom提供style的方法

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";

最终样式

是终显示样式由内联样式和CSS规则共同组成。
IE和DOM具有不同的处理方式
IE
在每个元素上提供currentStyle对象。
可以用currentStyle得到内部样式和外部样式规则属性。
currentStyle是只读属性。
DOM
document.defaultView.getComputedStyle(div,null).backgroundColor
很多浏览器不支持。