CSS相关的DOM操作

最新推荐文章于 2023-08-02 16:28:21 发布

iteye_12132

最新推荐文章于 2023-08-02 16:28:21 发布

阅读量131

点赞数

分类专栏： DOM 文章标签： CSS Chrome IE Firefox JavaScript ViewUI

DOM 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

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>

[b]getComputedStyle(el,pre)[/b]:获取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"

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

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


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

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

iteye_12132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS相关的DOM操作

1.设置元素的float属性：由于float在javascript里面是关键字，因此，对于float的设置，在Firefox,Chrome中，使用 [b]cssFloat[/b]代替，在IE 中，使用[b]styleFloat[/b]代替。2.对于css属性中,用'-'连接的属性，如background-color等，在读写的时候，要求转化为驼峰写法，如:background-co...
复制链接

扫一扫