js操纵css样式

操作元素的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。