操作元素的Style样式属性

1、格式对比：

演示代码：

css样式属性：    background-color    color  font  font-family  font-weight  .....    JS样式属性：  style.backgroundColor  style.color style.font  style.fontFamily  style.fontWeight  .....

2、使用DOM的style对象

javascript样式表分为：内嵌式样式表；内联式样式表；外联式样式表。 操作元素的style样式属性（内嵌式）

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;

如果要想更改css样式里的值，那就要使用最终样式表了！

最终样式表：

演示代码：

function zzys(obj,attr){            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];        };

总结：对每个css样式，Style对象都包含了一个相对应得属性。对于单个词的css样式，style对象用相同属性额名字来代表；对于两个词的样式，style对象用去掉两个单词之间的连接线，并把第二个单词的首字母大写来表示。使用DOM的style对象的相关属性获取元素的css样式只针对内联样式，对于外部样式表和style元素中的css，则需要采用document.styleSheets。