js知识点getComputedStyle的用法，js获取dom样式的方法

获取dom样式的方法情况分为两种：第一种 行内样式  第二种  其他样式

一、行内样式获取比较简单，一般通过element.style.attr即可获取样式。

<template>
 <div id="demo"></div>
<template>
<script>
     var dom = document.getElementById('demo')
     console.log(dom.style.width) // 300px
</script>

二、其他样式。这里以class样式为例。

<template>
 <div class="box"></div>
 <div class="box"></div>
<template>
<script>
     var dom = document.getElementsByClassName('box')[1]
     getComputedStyle(dom,null)['color']   //red
</script>
<style>
.box {
 width: 200px;
 height: 200px;
 color: red;
</style>

js知识点总结之getComputedStyle的用法

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值;getComputedStyle()这个方法来获取元素当前的样式;

这个方法是window的方法，可以直接使用

需要两个参数

• 第一个：要获取样式的元素
• 第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

1.可以通过 getComputedStyle(对象，null).样式名 的形式来读取样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如：没有设置width，它不会获取到auto，而是一个长度

2.为了更方便的使用 可以加入正则表达式获取样式名

利用 getComputedStyle(样式元素，null)[样式名] 的形式来获取样式

补充：getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的（只读与可写）。

1、正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。

2、获取的对象范围getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；

而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值

（如果有）就是190+， 而element.style就是0。