使用DOM操作样式表

javascript样式表分为：内嵌式样式表；内联式样式表；外联式样式表。

操作元素的style样式属性（内嵌式）

css样式属性和javascript样式属性对比：

Css样式属性 javascript样式属性

  background-color style.backgroundColor

  color style.color

  font style.font

  font-family style.fontFamily

当属性名有2个单词以上时就要使用驼峰命名。

如将一个<div />id="div1"的CSS边框属性更改为"1px solid red",背景色改为green：

var oDiv = document.getElementByIdx_x("div1");

oDiv.style.border = "1px solid red";

oDiv.style.backgroundColor = green;

DOM为style提供了几种方法：

1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。

2. getPropertyPriority() -- 如果CSS属性规则指定了"！import",则返回字符串 "!import",否则返回空字符串。

3. item(index) -- 返回指定索引的CSS属性名称。

4. removeProperty(propertyName) -- 从CSS定义中删除propertyName。

5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyName为value 以及给定的优先级。

操作外部样式表及style元素中的样式

DOM指定了一个样式表对象，该对象如下属性：

1. disabled -- 指示样式表是否disabled；

2. href -- 外部样式表的URL；

3. media -- 在media属性中指定的可以使用样式表的媒体类型列表；

4. ownerNode -- 指定样式表的DOM节点（<link />或<style />元素）；

5. parentStyleSheet -- 如果样式表被包含在CSS@import语句中，本属性指向语句 发现的样式；

6. title -- 通过HTML的title属性指定的样式列表；

7. type -- 样式表的mime类型。

访问DOM浏览器样式表规则使用cssRules集合；访问IE样式规则使用rules集合。

如判断使用哪个集合名：

var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

操作最终样式（这种只能读）

IE使用currentStyle对象：如显示id为div1的颜色

var oDiv = document.getElementByIdx_x("div1");

alert(oDiv.currentStyle.color);

DOM使用getComputedStyle(要获取样式表的元素，伪元素)：如显示id为div1的颜色

var oDiv = document.getElementByIdx_x("div1");

alert(document.defaultView.getComputedStyle(oDiv,null).color);

总结

以上是生活随笔为你收集整理的使用DOM操作样式表的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。