js 获取样式

三尺秋水一点飞鸿

于 2018-10-22 20:59:07 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

分类专栏： js 笔记

本文链接：https://blog.youkuaiyun.com/qq_42467563/article/details/83278840

练习同时被 3 个专栏收录

201 篇文章

订阅专栏

笔记

185 篇文章

订阅专栏

32 篇文章

订阅专栏

本文介绍了一种兼容不同浏览器的JavaScript方法，用于获取HTML元素的CSS样式。通过封装getStyle函数，无论是在低级还是高级浏览器中，都能准确读取到元素的宽度、高度等样式属性。

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

<html>
   <head>
       <meta charset="utf-8" />
       <title>获取样式</title>
       <style>

           div {
               width: 500px;
               height: 300px;
               background: red;
           }

       </style>
   </head>
   <body>
       <div></div>
   </body>
   <script>

       // 找到对象
       var oDiv = document.getElementsByTagName('div')[0]
       // 这种方式只能获取行内样式
       //alert(oDiv.style.width)
       // 低级浏览器
       // alert(oDiv.currentStyle['width'])
       // 高级浏览器
       // alert(getComputedStyle(oDiv, null)['width'])

       alert(getStyle(oDiv, 'width'))

       // 封装兼容获取样式的方法
       function getStyle(obj, attr)
       {
           if (typeof(obj.currentStyle) == 'undefined') {
               return getComputedStyle(obj, null)[attr]
           } else {
               return obj.currentStyle[attr]
           }
       }

   </script>
</html>