获得obj样式：支持width, opacity，兼容IE8 ff chrome

最新推荐文章于 2025-08-12 18:06:10 发布

weixin_33739523

最新推荐文章于 2025-08-12 18:06:10 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/812346/blog/206938

本文详细介绍了如何使用JavaScript获取HTML标签的样式，特别针对非行间样式和透明度的获取方法，包括对于IE浏览器和火狐浏览器的不同处理策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<html>
  <head>
    <title></title>
<style>
#div1{width:100px; height:120px; position:absolute; top:20px; left:100px; 
	background:red; color:white;
	opacity:0.2;
	filter:alpha(opacity=20);
}
</style>
  </head>
  <body>
  
  <div id=div1>div1</div>
  
  
    <script>
  /********************************
*获取非行间样式 ok
********************************
*用js的style属性可以获得html标签的样式,但是不能获取非行间样式。
*那么怎么用js获取css的非行间样式呢?
*在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed
*已经对透明度做单独处理，兼容IE8 ff chrome。
*/
function getStyle3(obj_, attr){
        var obj = typeof obj == 'string' ? document.getElementById(obj_) :
obj_;//防止传入的是ID，增强健壮性；
        
        var _value=obj.currentStyle? obj.currentStyle[attr] :  //for IE only
                getComputedStyle(obj, false)[attr] ;    //for ff/chrome only
        if (attr != 'opacity' ){//所有透明度都是[0, 100]
                return _value;
        }else{
                return _value*100;
        }
}
  
  var o = document.getElementById('div1');
  alert(  	getStyle3(o, 'opacity')	);  
</script>
  </body>
</html>

----

转载于:https://my.oschina.net/u/812346/blog/206938