getComputedStyle

getComputedStyle

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法

  const demo = document.getElementById('demo')
  const styleObj = getComputedStyle(demo)
  console.log(styleObj.width)
  console.log(styleObj.backgroundColor)

 

而不同点就是：

  • element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。

  • element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式

总结：我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #demo {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="demo" style="color: red">文字</div>
    <script>
      const demo = document.getElementById('demo')
      // 注意: 元素.style只能拿到行内样式
      console.log(demo.style.width)
      console.log(demo.style.color)

      // width,height, bgc 不是行内样式,但是需要在js中获取
      // getComputedStyle 可以拿到当前元素的所有样式
      const demoStyleObj = getComputedStyle(demo)
      console.log(demoStyleObj.width)
      console.log(demoStyleObj.height)
      console.log(demoStyleObj.backgroundColor)
      console.log(demoStyleObj.color)
    </script>
  </body>
</html>

 

posted @ 2020-09-01 22:45  全情海洋  阅读(250)  评论(0)  编辑  收藏  举报