javascript --获取css样式最终的属性值

来源：互联网发布：finder for mac 编辑：程序博客网时间：2024/06/07 08:00

在dom元素中使用css属性，可能会遇到两个问题，一是javascript要求在设置任何几何属性是必须明确尺寸单位，同时，任何几何属性都回返回表示元素样式的字符串数值（比如1000px而非100）

二是如果一个元素是100像素高，想获取他的当前高度，如果希望从样式属性中就能得到100px这样的精确结果，但是有时候并不能如愿。这是因为在使用样式表或者行内css所预设的样式信息并不能精确可靠的反应到当前的样式属性中。

如下例：

[c-sharp] view plaincopy
<html>  
  
<head>  
  
<title></title>  
<mce:style><!--  
 p{height:100px;}  
--></mce:style><style mce_bogus="1"> p{height:100px;}</style>  
<mce:script type="text/javascript"><!--  
function getStyle(elem,name)  
{  
    if(elem.style[name])  
        return elem.style[name];  
    else if(elem.currentStyle)  
    {  
        return elem.currentStyle[name];  
          
    }  
    else if(document.defaultView&&document.defaultView.getComputedStyle)  
    {  
        name=name.replace(/[A-Z]/g,"-$1");  
        name=name.toLowerCase();  
        var s=document.defaultView.getComputedStyle(elem,"");  
        return s&&s.getPropertyValue(name);  
          
    }  
    else return null;  
}  
window.onload=function()  
{  
    var p=document.getElementsByTagName("p")[0];  
    alert(p.style.height+"should be null");  
    alert(getStyle(p,"height")+"should be 100px");  
}  
// --></mce:script>  
</head>  
  
<body>  
<p> i should be 100px stall.</p>  
</body>  
  
</html>  

你就会发现css最终值不等于样式对象值得情况发生了。

如果地到元素的最终css样式值：可以同过下面这个通用函数得到：

[c-sharp] view plaincopy
function getStyle(elem,name)  
{  
    if(elem.style[name])  
        return elem.style[name];  
    else if(elem.currentStyle)  
    {  
        return elem.currentStyle[name];  
          
    }  
    else if(document.defaultView&&document.defaultView.getComputedStyle)  
    {  
        name=name.replace(/[A-Z]/g,"-$1");  
        name=name.toLowerCase();  
        var s=document.defaultView.getComputedStyle(elem,"");  
        return s&&s.getPropertyValue(name);  
          
    }  
    else return null;  
}  

在这个函数里，单位默认的事px，忽略其他的计量单位。