getElementById和currentStyle

来源：互联网发布：java用户权限管理框架编辑：程序博客网时间：2024/06/04 17:42

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

只是推荐一下^_^。

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