读取CSS属性 (el.style.property读取不到的问题)

分两种情况讨论：

1、使用内联样式，即直接把CSS写在HTML元素的style属性中

<div id="d1" style="width:100px;height:200px;">              
</div> 

通过以下js代码可以获取width等属性，

alert(document.getElementById('d1').style.width);//100px  

在firefox，ie，opera，safari，chrome上都可以取得到宽度和高度值。

2、使用嵌入、链入或引入样式表（非内联样式），这时候通过element.style.width是获取不到的。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>b.html</title>	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	#d2 {
    		width:400px;
			height:200px;
			border:5px solid gray;
			padding:5px;
    	}
    </style>    
	<script>
		window.onload=function(){
			
			//2、使用嵌入、链入或引入样式表（非内联样式）
			
			//ie：通过currentStyle			
			alert(document.getElementById('d2').currentStyle.width);//400px ie
			
			//ff,safari,opera,chrome:通过window.getComputedStyle
			var el=document.getElementById('d2');
			alert(window.getComputedStyle(el,null).style.width);//400px safari,opera,chrome
		}
	</script>
  </head>
  
  <body>		
		<div id="d2"></div>
  </body>
</html>

最后封装到一个方法中，

function getRealStyle(el,cssName)
{				
	var len=arguments.length, sty, f, fv;
					
	'currentStyle' in el ? sty=el.currentStyle : 'getComputedStyle' in window 
						 ? sty=window.getComputedStyle(el,null) : null;
						 				
	if(cssName==="opacity" && document.all){
		f = el.filters;
	    f && f.length>0 && f.alpha ? fv=f.alpha.opacity/100 : fv=1;           		
		return fv;
	}	
	cssName==="float" ? document.all ? cssName='styleFloat' : cssName='cssFloat' : cssName;	
	sty = (len==2) ? sty[cssName] : sty;								
	return sty;
}	

如果只想获取元素的style对象，则只传第一个参数，第二个参数是获取该对象style属性为styName的值。

 

参考 ：currentStyle对象参考 http://topic.youkuaiyun.com/u/20070530/11/ba52d8be-1c9d-4e01-b036-cc29bd98278a.html