js获取css样式封装

最新推荐文章于 2024-08-12 01:25:53 发布

m0_57508171

最新推荐文章于 2024-08-12 01:25:53 发布

阅读量124

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_57508171/article/details/116210199

版权

该博客介绍了一个JavaScript函数getStyle()，用于获取DOM元素的CSS样式，包括对IE和火狐浏览器的兼容处理。示例中展示了如何获取并显示一个div元素的宽度和高度，从而突出函数的实用性和兼容性。

摘要由CSDN通过智能技术生成

封装
      function getStyle(obj , attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐
      };

具体代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        margin: 50px auto;
        width: 300px;
        height: 250px;
        color: #fff;
        background:#70aa39;
        text-align: center;
        line-height: 50px;
    }
  </style>
 </head>
 <body>
    <div id="box"></div>
 <script>
    var oBox = document.getElementById("box"),
        oW = parseFloat(getStyle(oBox , "width")),
        oH = parseFloat(getStyle(oBox , "height"));
        oBox.innerHTML = "宽:"+oW+"px"+"<br/>"+"高:"+oH+"px";
    //封装
      function getStyle(obj , attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐
      };
  </script>
 </body>
</html>

m0_57508171

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取css样式封装

封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐 };具体代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫