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);