console.log(document.querySelector(".green").style.backgroundColor);// gives an empty string as a result in console.green { width: 200px; height: 200px; background-color: green;}<!DOCTYPE html><html><head> <title>test</title> <meta charset="UTF-8"> <link rel="stylesheet" href="src/styles.css"></head><body> <div class="green"></div> <script src="src/index.js"> </script></body></html>我知道我也可以使用window.getComputedStyle(document.querySelector(".green")).backgroundColor;这个答案中提到了但我想知道这背后的原因，即为什么它给出一个空字符串。
3 回答
ITMISS
TA贡献1871条经验 获得超8个赞
.style仅包含内联样式（通过该属性或具有相同名称的 HTML 属性设置）。它根本不受样式表的影响。getComputedStyle为您提供该财产的当前有效价值，无论它来自哪里。
红糖糍粑
TA贡献1815条经验 获得超6个赞
您想要计算的元素样式：
console.log(getComputedStyle(document.querySelector(".green"), null).getPropertyValue("background-color"));
浮云间
TA贡献1829条经验 获得超4个赞
正如该属性的 MDN 页面element.style中所述：
该
style属性用于获取和设置元素的内联样式。
您的元素没有style设置背景颜色的属性 - 因此<yourelement>.style.backgroundColor返回空字符串。这就是getCompatedStyle存在的原因——允许您询问元素上实际的最终/应用的样式，而不仅仅是那些可能作为属性内联在元素上的样式style。
添加回答
举报
0/150
提交
取消