js中css样式的操作

HTML中定义样式的方式有三种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用style特性定义针对特定元素的样式。“DOM2级样式"模块围绕这3种应用样式提供了一套API。要确定浏览器是否支持DOM2级定义的CSS能力，可以使用下列代码：

var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0";
var supportsDOM2CSS2=document.implementation.hasFeature{"CSS2”，“2.0”);

1 访问元素的样式

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleSeclaration实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。对于使用短划线（如background-color）的CSS属性名，必须将其转换为驼峰大小写形式，才能通过JavaScript来访问。

多数情况下，都可以通过简单的转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float，因为float是JavaScript中的保留字。“DOM2级样式”规范规定样式对象上相应的属性名应该是CSSFloat；Firefox、safari、opera和chrome都支持这个属性，而IE支持的则是styleFloat。

通过style对象可以取得在style特性中指定的样式

<div id="myDiv" style="background-color:blue;width:100px;height:100px></div>

在style特性中指定的样式信息可以通过下列代码取得

console.log(myDiv.style.backgroundColor);
console.log(myDiv.style.width );

也可以通过JavaScript为其改变样式

myDiv.style.width="200px";

DOM样式的属性和方法

”DOM2级样式规范为style对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。

cssTest：在读取模式下，cssTest返回浏览器对style特性中css代码的内部表示。在写入模式下，赋给cssTest的值会重写整个style特性的值

length：元素的css属性的数量

parentRule:表示CSS信息的CSSRule对象

getPropertyCSSValue(propertyName)：返回给定属性值的CSSValue对象

getPropertyValue(propertyName)：返回给定属性的字符串值

item：返回规定你跟位置的css属性的名称

使用getPropertyValue()方法可以取得属性名，进一步取得属性值

<div id="div1" style="background-color: red;height: 100px;">颜色</div>

var div=document.getElementById("div1");
var prop,value,i,len;
for(i=0,len=div.style.length;i<len;i++){
	prop=div.style[i];
	value=div.style.getPropertyValue(prop);
	console.log(prop+" "+value);
}

运行结果

要从元素的样式中移除某个css属性，需要使用removeProperty()方法

div.style.removeProperty("height");

计算的样式
虽然style对象能够提供支持style特性的任何元素的样式信息，但他不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2级样式”增强了document.defaultView，提供了getComputedStyle（）方法。该方法返回一个CSSStyleDeclaration对象，其中包含当前元素所有计算的样式（style特性中的css属性覆盖内联样式的css属性，覆盖外部引用样式的属性）

var div2=document.getElementById("div2"); 
var computedStyle=document.defaultView.getComputedStyle(div2,null);
console.log(computedStyle.backgroundColor);

2 操作样式表

CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定于的样式表。该对象是一套只读的接口，使用下面的代码可以确定浏览器是否支持DOM2级样式表

var supportsDOM2StyleSheets=document.implementation.hasFeature("StyleSheets","2.0");

应用于文档的所有样式表是通过document.styleSheets集合来表示的。通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号或item()方法可以访问每一个样式表。

cssRules对象表示样式表中的每一条规则。CSSRule是一个供其他多种类型继承的基类型，其中最常见的是CSSStyleRule类型，表示样式信息.CSSStyleRule对象包含的属性常用的有cssText（返回整条规则对应的文本）、selectorText（返回当前规则的选择符文本）、style（通过它设置和取得规则中特定的样式值）

var sheet=document.styleSheets[0];
console.log(sheet);
var rules=sheet.cssRules||sheet.rules;
console.log(rule.style.cssText);