CSS有关的DOM操作
日期：2014-05-17 浏览次数：20480 次
CSS相关的DOM操作
1.设置元素的float属性：由于float在javascript里面是关键字，因此，对于float的设置，
在Firefox,Chrome中，使用 cssFloat代替，在IE 中，使用styleFloat代替。
2.对于css属性中,用'-'连接的属性，如background-color等，在读写的时候，要求转化为驼峰写法，
如:background-color --> backgroundColor来访问
3.通常设置style属性的时候，我们对于每一个属性都是独立分开写的，如：
其实，我们也可以一次性将上面的属性添加到el中：
4.获取节点的当前起作用的css规则：
getComputedStyle(el,pre):获取el的CSSStyleDeclaration属性对象,pre表示伪对象,如(:after).Firefox,Chrome支持,IE不支持.
注意：
1.对于颜色的获取，返回值通常是rgb()的形式(Firefox,chrome)，也有可能是其它形式.
2.对于margin(padding,border)属性，包括了上下左右的属性，直接读取border并不能得到结果(为空)，只能分开读取。
IE不支持getComputedStyle方法，它提供的是el下的一个currentStyle属性来实现：
注意：
1.对于颜色的获取，返回值通常是代码中所用形式相同.
2.对于margin(padding,border)属性，包括了上下左右的属性，直接读取border并不能得到结果(为空)，只能分开读取。
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并不能得到结果(为空)，只能分开读取。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
