在html中定义样式有3种方法：通过2cdf5bf648cf2f33323966d7f58a7f3f标签来引用外部的样式表文件，使用c9ccee2e6ea535a969eb3f532ad9fe89元素来定义嵌入式样式和使用style特性来针对特定的元素设置样式。“dom2级样式”模块是围绕这3种应用样式机制的一套api。要确定浏览器是否支持dom2级的css能力，可以使用下面的代码：
var supportsdom2css = document.implementation.hasfeature("css","2.0");
var supportsdom2css2 = document.implementation.hasfeature("css2","2.0");
如果浏览器支持dom2级的css能力，上面的代码返回的变量值为true。
访问元素的样式
任何支持style特性的html元素在javascript中都有一个对应的style属性。这个style对象是cssstyledeclaration的实例，包含着所有通过html的style特性指定的所有的样式信息，但是不包括与外部样式表或嵌入样式表经过层叠而来的样式。在style特性中指定的任何css属性都将表现为这个style对象的相应属性。
需要注意的是，在javascript中，访问css属性使用的是驼峰格式，而在css样式中的css属性使用的是“-”连接的形式。所以在使用的时候要将“-”连接形式的css属性转换为驼峰形式的javascript属性，例如下面的例子：
有一个例外的css属性是float属性，因为它是javascript的保留字，所以它不能用来作为属性名称。在“dom2级样式”规范规定该属性对应的javascript属性为cssfloat，firefox、chrome、safari和opera浏览器都支持这个属性，但是ie浏览器支持的是stylefloat属性。
我们只要取得了一个有效的dom元素的引用，就可以随时使用javascript来为它添加样式。例如下面的例子：
<div id="mydiv"></div>
<script type="text/javascript">
var div = document.getelementbyid("mydiv");
//设置div元素的背景颜色
div.style.backgroundcolor = "#f00";
//修改div元素的大小
div.style.width = "100px";
div.style.height = "150px";
//指定div元素的边框
div.style.border = "1px solid #00f";
</script>
通过style对象，我们也可以取得style特性中指定的css样式，例如下面的例子：
<div id="mydiv" style="background-color:#f00;width:200px;height:300px;"></div>
<script type="text/javascript">
var div = document.getelementbyid("mydiv");
console.info(div.style.backgroundcolor);
console.info(div.style.width);
console.info(div.style.height);
</script>
dom样式的属性和方法
“dom2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素style特性值的同时，也可以修改元素的样式。
csstext：通过该属性可以访问style特性中的css代码。
length：应用给元素的css属性的数量。
parentrule：表示css信息的cssrule对象。
getpropertycssvalue(propertyname)：返回包含指定属性值的cssrule对象。
getpropertypriority(propertyname)：如果给定的css属性使用了!important设置，则返回important，否则返回空字符串。
getpropertyvalue(propertyname)：返回指定属性的字符串值。
item(index)：返回指定位置的css属性的名称。
removeproperty(propertyname)：从样式中删除指定的属性。
setproperty(propertyname,value,priority)：将指定属性设置为相应的值，并加上优先权标志（important或一个空字符串）。
通过csstext属性可以读取指定元素的style特性中的css代码，也可以设置指定元素的style特性。例如：
var div = document.getelementbyid("mydiv");
div.style.csstext = "background-color:#f00;width:200px;height:300px;";
console.info(div.style.csstext);
csstext属性可以快速的一次为元素设置多个css属性。
length属性可以获取应用给元素的css属性的数量，可以使用这个属性来遍历css属性。它经常和item()方法配合使用。在使用length属性和item()方法的时候，style对象实际上是一个集合，也可以使用方括号语法来替代item()来获取指定位置的css属性，例如下面的例子：
for(var i = 0,len = div.style.length; i < len; i++){
console.info(div.style[i]);
//或者使用item()
//console.info(div.style.item(i));
}
通过item()方法或方括号的方法，我们都可以获取到css的属性名称（注意：获取的css属性名称是破折号形式，而不是驼峰形式）。在获取css属性名称之后，我们就可以通过getpropertyvalue()方法来获取这个属性对应的值。
for(var i = 0,len = div.style.length; i < len; i++){
var prop = div.style[i];//或者：var prop = div.style.item(i);
var value = div.style.getpropertyvalue(prop);
console.info(prop+":"+value);
}
getpropertyvalue()方法会返回css属性的字符串表示。如果你需要得到更多的信息，可以使用getpropertycssvalue()方法。该方法返回一个包含2个属性的cssvalue对象，这两个属性分别是：csstext和cssvaluetype。其中，csstext属性的值和使用getpropertyvalue()方法获取的值相同，而cssvaluetype则是一个数值常量，表示值的类型：0表示继承的值，1表示基本的值，2表示值列表，3表示自定义的值。
只有safari 3+和chrome浏览器支持getpropertycssvalue()这个方法。
要从元素样式中移除某个css属性，可以使用removeproperty()方法。使用该方法一次只移除一个属性，被移除后的属性将使用默认的样式。例如，要想移除元素的背景颜色，可以像下面这样写代码：
div.style.removeproperty("backgroundcolor");
firefox、chrome、safari和opera 9+都支持以上的属性和方法，但是ie浏览器只支持csstext属性。safari 3+和chrome浏览器是唯一支持getpropertycssvalue()方法的浏览器。
计算的样式
虽然style对象能够提供支持style特性的任何元素的样式信息，但是它不包含那些从其它样式表层叠过来的样式。“dom2级样式”增强了document.defaultview，提供了一个getcomputedstyle()方法。该方法接收2个参数：要取得计算样式的元素和一个伪元素字符串（如":after"）。如果不需要伪元素信息，第二个参数可以为null。getcomputedstyle()方法返回一个cssstyledelaration对象。其中包含了当前元素的所有计算的样式。下面是一个例子：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>getcomputedstyle()</title>
<style type="text/css">
#mydiv{
width: 100px;
height: 100px;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="mydiv" style="background-color:#f00;border:1px solid #f00;"></div>
</body>
</html>
在上面的html代码中，应用到div#mydiv元素上的css样式一方面来自嵌入的样式表，另一方面来自元素本身的style样式。但是style特性中设置了background-color和border两个属性，没有设置width和height这两个属性。通过下面的代码可以获得这个元素计算后的css样式：
var div = document.getelementbyid("mydiv");
var computedstyle = document.defaultview.getcomputedstyle(div,null);
console.info(computedstyle.backgroundcolor);
console.info(computedstyle.width);
console.info(computedstyle.height);
console.info(computedstyle.border);
由于在设置border属性的时候，实际上是设置4个边框的宽度、颜色和样式属性：border-left-width、border-top-color、border-right-style等，所以在不同的浏览器上computedstyle.border的返回值是不同的，在firefox浏览器中执行上面的代码computedstyle.border的返回值就是一个空字符串。所以实际使用getcomputedstyle()方法的时候最好在多种浏览器上测试一下。
ie浏览器不支持getcomputedstyle()方法，但是它有一个类似的概念。在ie浏览器中，每个具有style属性的元素还有一个currentstyle属性。这个属性是cssstyledelaration的实例，它包含当前元素全部的计算后的样式。要获取这些样式的方法和前面也类似：
var div = document.getelementbyid("mydiv");
var computedstyle = document.currentstyle;
console.info(computedstyle.backgroundcolor);
console.info(computedstyle.width);
console.info(computedstyle.height);
console.info(computedstyle.border);
和dom版本相同，ie也没有返回border样式，因为它是一个综合性的属性。
无论在哪个浏览器中，所有的计算样式都是只读的，不能修改计算后样式对象中的css属性。另外，计算后的样式也包括属于浏览器内部样式表的样式信息。例如，所有的浏览器的visibility属性都有一个默认值，但这个值会因为浏览器的不同而不同。默认情况下，有的浏览器visibility属性的值设置为visible，而有的浏览器则将它设置为inherit，所以，如果你需要某个元素具有某个特定值，需要手动设置它。
以上就是javascript文档对象模型-dom2级样式的内容。