如何获取样式并且更改样式

getComputedStyle()

getComputedStyle用法

1. document.defaultView.getComputedStyle(element[,pseudo-element]);

或者

2. window.getComputedStyle(element[,pseudo-element]);

参数

首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
使用示例：

1. let my_div = document.getElementById("myDiv");
2. let style = window.getComputedStyle(my_div, null);

getPropertyValue()

所述CSSStyleDeclaration.getPropertyValue（）方法接口返回一个DOMString含有一个指定的CSS属性的值。

参数

• property 是DOMString 要检查表示属性名称。

返回值

• *value* 是一个DOMString包含该属性的值。如果未设置，则返回空字符串。

例

以下JavaScript代码查询marginCSS选择器规则中的属性值：

var declaration = document.styleSheets[0].cssRules[0].style;
var value = declaration.getPropertyValue('margin'); // "1px 2px"

如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");
getComputedStyle方法在伪类元素上的特异功能

总体示例

    
    
    
    
    


    

        
获取dom计算后的样式
    
    

输出结果：

image