javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

　　样式表有三种方式

　　内嵌样式（inline Style）：是写在Tag里面的，内嵌样式只对所有的Tag有效。

　　内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。

　　外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

　　下面的是读取除了内嵌样式之外样式的js，只能读不能写。

复制代码代码如下:

　　var mydiv = document.getElementById('mydiv');

　　if(mydiv.currentStyle) {

　　var width = mydiv.currentStyle['width'];

　　alert('ie:' + width);

　　} else if(window.getComputedStyle) {

　　var width = window.getComputedStyle(mydiv , null)['width']

　　alert('firefox:' + width);

　　}

　　另外在FF下还可以通过下面的方式获取

　　document.defaultView.getComputedStyle(mydiv,null).width

　　window.getComputedStyle(mydiv , null).width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Document</title> 
<style> 
#test{width:200px;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="test">this is test content</div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20oTest%20%3D%20document.getElementById('test')%3B%20%0D%0AoTest.style.width%20%3D%20400%2B'px'%3B%20%0D%0Aif(oTest.currentStyle)%7B%20%0D%0Aalert('ie%3A%20'%20%2B%20oTest.currentStyle%5B'width'%5D)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aalert('ff%3A%20'%20%2B%20window.getComputedStyle(oTest%2C%20null)%5B'width'%5D)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

　　解决方案：引入currentStyle,runtimeStyle,getComputedStyle

　　style 标准的样式！可能是由style属性指定的！

　　runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！

　　currentStyle 指 style 和 runtimeStyle 的结合！

　　通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE）

　　如：document.getElementById("test").currentStyle.top

　　要兼容FF，就得需要getComputedStyle 出马了

　　注意:getComputedStyle是firefox中的，

　　currentStyle是ie中的.

　　比如说

复制代码代码如下:

　　<style>

　　#mydiv {

　　width : 300px;

　　}

　　</style>

　　则:

复制代码代码如下:

　　var mydiv = document.getElementById('mydiv');

　　if(mydiv.currentStyle) {

　　var width = mydiv.currentStyle['width'];

　　alert('ie:' + width);

　　} else if(window.getComputedStyle) {

　　var width = window.getComputedStyle(mydiv , null)['width'];

　　alert('firefox:' + width);

　　}

　　另外在FF下还可以通过下面的方式获取

复制代码代码如下:

　　document.defaultView.getComputedStyle(mydiv,null).width

　　window.getComputedStyle(mydiv , null).width

教程首页更多教程