获取计算后的样式

  1. <head>
  2.   <meta charset="UTF-8">
  3.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.   <title>Document</title>
  5.   <style>
  6.     .box {
  7.       width: 100px;
  8.       height: 100px;
  9.       color: red;
  10.       background-color: skyblue;
  11.     }
  12.   </style>
  13. </head>
  15. <body>
  16.   <div id="box" class="box"></div>
  17.   <script>
  18.     var box = document.getElementById('box');
  19.     // console.log(box.style.width)
  22.     // getComputedStyle 获取计算后样式
  23.     // var cssObj = window.getComputedStyle(box)
  24.     // console.log(cssObj.display)
  25.     // console.log(cssObj.backgroundColor) // css中的带-的属性 我们在js中要去掉- 并把后面的首字母转大写
  26.     // console.log(cssObj['background-color'])
  30.     // IE中不支持getComputedStyle 但是有自己的属性 currentStyle
  31.     // 一个对象的属性值如果是函数 那么我们管它叫方法
  32.     // console.log(box.currentStyle.backgroundColor);
  34.     console.log(window.navigator)
  37.     // 解决兼容性问题 
  38.     // 因为我们不知道我们所写的代码将来会被运行在哪里 所以代码如何写？
  39.     // 所以我们就要解决这样的问题
  40.     // 我们通常会封装一个函数 用于解决
  41.     // function getCss(yuansu, shuxing) {
  42.     //   if (window.navigator.userAgent.indexOf("IE") != -1) {
  43.     //     return yuansu.currentStyle[shuxing]
  44.     //   } else {
  45.     //     return window.getComputedStyle(yuansu)[shuxing];
  46.     //   }
  47.     // }
  51.     function getCss(yuansu, shuxing) {
  52.       // 能力检测
  53.       if (window.getComputedStyle) {
  54.         return window.getComputedStyle(yuansu)[shuxing]
  55.       } else {
  56.         return yuansu.currentStyle[shuxing]
  57.       }
  58.     }
  62.     var width = getCss(box, 'width');
  63.     console.log(width)
  64.   </script>
  65. </body>
  67. </html>