js获取和修改css值

常用的应该就两种。

• element.style
• getComputedStyle

获取到的是CSSStyleDeclaration

这个集合大部分时候会用到的方法就是getPropertyValue()用来取属性具体的值

和直接用点运算符没区别

接下来说一下不同点：

.style方式

缺点是它显示的是内联样式的值，如果你写在style或者外部引入是没办法获取的。
优点是它可以修改css值

getComputedStyle(el, '::before')

第二个参数是伪元素，如果不想获取伪元素的样式，那就省略或者null.

Chrome中auto就是auto。

有一点getComputedStyle与style方式不同

<p id="test" style="width: 30%;">aaa</p>
<script>
    const el = document.querySelector('#test');
    console.dir(getComputedStyle(el));
    console.dir(el.style);
</script>

getComputedStyle方式显示的会是具体的像素值（与上图的表现一致，resolved value通常与computed value相同，但对于一些旧的属性如width，又与used value相同）。而style方式显示的就是30%。

最后补充一下兼容IE