1.对于内联样式，可以直接使用ele.style.属性名（当然也可以用键值对的方式）获得。注意在CSS中单词之间用-连接，在JS中要用驼峰命名法
如
<div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div> ???<script> ???????var dv = document.getElementById("dv"); ???????console.log(dv.style.width); ???//100px ???????console.log(dv.style["height"]);//200px ???????console.log(dv.style.backgroundColor);//pink ???????console.log(dv.style.border);//1px solid green ???</script>2.对于外联样式表或者头部的style标签内的样式表里的样式内容，用上面的方法无法获得
可以使用js中的window.getComputedStyle(element,pseudoElement).属性名的方法获得。获取的样式是元素在浏览器中最终渲染效果的样式。
其中window.可以省略
其中pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。
<style> ???????#dv2{ ???????????width: 100px; ???????????height: 200px; ???????????background-color: #0086b3; ???????????border: 1px solid red; ???????} ???</style> <div id="dv2" style="border-color: black"></div> ???<script> ???????var dv2 = document.getElementById("dv2"); ???????console.log(dv2.style["height"]);//空值，没有内联该样式无法获取 ???????console.log(dv2.style.backgroundColor);//空值，没有内联该样式无法获取 ???????console.log(window.getComputedStyle(dv2,null).width);//100px ???????console.log(getComputedStyle(dv2,null).backgroundColor);//rgb(0, 134, 179) ???????console.log(getComputedStyle(dv2,null).border); //1px solid rgb(255, 0, 0),内联样式修改成了黑色，内联的权重更高。 ???????console.log(getComputedStyle(dv2,null)["border"]); //1px solid rgb(255, 0, 0)键值对的方式当然也行 ???</script>3.修改CSS样式，只能通过ele.style.属性名的方式修改CSS样式，不能通过getComputedStyle()的方法修改。
JS中获取CSS样式的方法
原文地址：https://www.cnblogs.com/yucheng6/p/9696274.html