getElementById和currentStyle

请复制代码,并保存为htm或者html格式后阅读。然后再查看源文件,这样比较好理解。

 

只是推荐一下^_^。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>样式测试页</title> <mce:style type="text/css"><!-- p { background-color: white; color: red; } body { background-color: #8c8c8c; } --></mce:style><style type="text/css" mce_bogus="1"> p { background-color: white; color: red; } body { background-color: #8c8c8c; }</style> </head> <body> <fileset> 当多个 CSS 规则同时应用到某个元素上时,获取这个元素的实际样式有时候是有帮助的。<br /> 您可能会简单的认为,通过元素的 style 属性就可以得到,这样的话您就错了。<br /> 它只会返回 style 属性的内容。<br /> 要获得元素的最终样式(包括在外部定义的样式),您需要使用 getComputedStyle 函数。 <br /> 为了演示,我们创建一个简单的测试页面。它首先对页面中所有的 <br /> 元素定义了同一个样式,但随后对其中的一个 <br /> 元素用它的 style 属性重新定义了样式。 <br /> 用这种方法获得的信息并不是很有用,所以您不应该再用 element.style 来获取单独的样式。 </fileset> <hr /> <p id="p1">这行是红色的。</p> <p id="p2" style="color: blue" mce_style="color: blue">这行是蓝色的,内部style的优先级高</p> <mce:script type="text/javascript" language="javascript"><!-- /*下面这段代码在IE中有效*/ var p1elem, p2elem; p1elem = document.getElementById('p1'); p2elem = document.getElementById('p2'); alert(p1elem.style.color); alert(p2elem.style.color); // 提示为空字符串 alert(p2elem.style.color); // 提示 "blue" // --></mce:script> <mce:script type="text/javascript" language="javascript"><!-- /*下面这段代码在FireFox中有效*/ if (window.getComputedStyle)//判断浏览器是否支持 { var p1elem, p2elem, p1style, p2style; p1elem = document.getElementById('p1'); p2elem = document.getElementById('p2'); p1style = getComputedStyle(p1elem, ''); p2style = getComputedStyle(p2elem, ''); alert(p1style.color); // 提示 "rgb(255, 0, 0)" alert(p2style.color); // 提示 "rgb(0, 0, 255)" }else { /*下面这段代码在IE中有效*/ var p1elem, p2elem; p1elem = document.getElementById('p1'); p2elem = document.getElementById('p2'); alert(p1elem.currentStyle.color); alert(p2elem.currentStyle.color); // 提示 "red" // 提示 "blue" } // --></mce:script> DOM标准引入了覆盖样式表的概念,<br /> 当我们用document.getElementById("id").style.backgroundColor 获取样式时<br /> 获取的只是id中style属性中设置的背景色,<br /> 如果id中的style属性中没有设置background-color那么就会返回空,<br /> 也就是说如果id用class属性引用了一个外部样式表,<br /> 在这个外部样式表中设置的背景色,那么不好意思<br /> document.getElementById("id").style.backgroundColor 这种写法不好使,<br /> 如果要获取外部样式表中的设置,<br /> 需要用到window对象的getComputedStyle()方法,<br /> 代码这样写<br /> window.getComputedStyle(id,null).backgroundColor <br /> 但是兼容问题又来了,这么写在firefox中好使,<br /> 但在IE中不好使,两者兼容的方式写成 <br /> <nobr>window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];<nobr /> <br /> 如果是获取背景色,这种方法在firefox和IE中的返回值还是不一样的,<br /> IE中是返回"#ffff99"样子的,而firefox中返回"rgb(238, 44, 34) " <br /> 值得注意的是:<br /> window.getComputedStyle(id,null)这种方式不能设置样式,只能获取,<br /> 要设置还得写成类似这样id.style.background="#EE2C21"; <br /> <br /> <br /> <br /> </body> </html>

你可能感兴趣的:(getElementById和currentStyle)