CSS有关的DOM操作 _HTML/CSS

CSS相关的DOM操作
1.设置元素的float属性：由于float在javascript里面是关键字，因此，对于float的设置，
在Firefox,Chrome中，使用 cssFloat代替，在IE 中，使用styleFloat代替。

2.对于css属性中,用'-'连接的属性，如background-color等，在读写的时候，要求转化为驼峰写法，
如:background-color --> backgroundColor来访问

el.style.backgroundColor = "blue";

3.通常设置style属性的时候，我们对于每一个属性都是独立分开写的，如：

el.style.backgroundColor = "blue";
el.style.border = "1px solid black";
el.style.margin = "10px";

其实，我们也可以一次性将上面的属性添加到el中：

el.style.cssText = "background-color:blue;border:1px solid black;margin:10px;";

4.获取节点的当前起作用的css规则：

<html>
<head>
<title> Computed Styles Example </title>
<style type='text/css'>
#myDiv {
	background-color: blue;
	width: 100px;
	height: 200px;
}

</style>
</head>
<body>
<div id='myDiv' style='background-color: red; border: 1px solid black'> </div>
</body>
</html>

getComputedStyle(el,pre):获取el的CSSStyleDeclaration属性对象,pre表示伪对象,如(:after).Firefox,Chrome支持,IE不支持.

var myDiv = document.getElementById('myDiv');
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

alert(computedStyle.backgroundColor); //rgb(255,0,0) or #ff0000 or red
alert(computedStyle.width); //”100px”
alert(computedStyle.height); //”200px”
alert(computedStyle.border); //”1px solid black” in some browsers
alert(computedStyle.borderLeftWidth); //”1px"
alert(computedStyle.borderLeftStyle); //”solid"

注意：
1.对于颜色的获取，返回值通常是rgb()的形式(Firefox,chrome)，也有可能是其它形式.
2.对于margin(padding,border)属性，包括了上下左右的属性，直接读取border并不能得到结果(为空)，只能分开读取。

IE不支持getComputedStyle方法，它提供的是el下的一个currentStyle属性来实现：

var style = document.getElementById('myDiv').currentStyle;
alert(style.borderLeftStyle);//'solid'
alert(style.paddingLeft);//'0px'
alert(style.backgroundColor);//'red'

注意：
1.对于颜色的获取，返回值通常是代码中所用形式相同.
2.对于margin(padding,border)属性，包括了上下左右的属性，直接读取border并不能得到结果(为空)，只能分开读取。