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

最新推荐文章于 2023-11-17 10:59:24 发布

hsany330

最新推荐文章于 2023-11-17 10:59:24 发布

阅读量871

点赞数

文章标签： javascript css function

在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.οnlοad=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，忽略其他的计量单位。

hsany330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript --获取css样式最终的属性值

在dom元素中使用css属性，可能会遇到两个问题，一是javascript要求在设置任何几何属性是必须明确尺寸单位，同时，任何几何属性都回返回表示元素样式的字符串数值（比如1000px而非100）二是如果一个元素是100像素高，想获取他的当前高度，如果希望从样式属性中就能得到100px这样的精确结果，但是有时候并不能如愿。这是因为在使用样式表或者行内css所预设的样式信息并不能精确可靠的反
复制链接

扫一扫