js获取元素样式

一、行内样式

具体实现

在js获取到dom元素之后，使用其style属性即可获取到其所有的行内样式

<div id="div1" style="width: 100px; height: 200px"></div>

const div1 = document.getElementById('div1');console.log(div1.style);

console.log('height:' + div1.style.height);

二、获取所有样式

具体实现

<div id="div2" class="box" style="font-size: 40px"></div>

/*demo.css*/.box {background-color: red;}

const div2 = document.getElementById('div2');console.log(document.defaultView.getComputedStyle(div2, null)); // 获取所有样式，包括内部样式、外部样式、行内样式

console.log(sty.width);console.log(sty.backgroundColor);console.log(sty.fontSize);