为什么 element.style.backgroundColor 属性给出一个空字符串作为结果？
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;但我想知道这背后的原因，即为什么它给出一个空字符串。
炎炎设计浏览 123回答 3
3回答
-
ITMISS
.style仅包含内联样式（通过该属性或具有相同名称的 HTML 属性设置）。它根本不受样式表的影响。getComputedStyle为您提供该财产的当前有效价值，无论它来自哪里。 -
红糖糍粑
您想要计算的元素样式： console.log(getComputedStyle(document.querySelector(".green"), null).getPropertyValue("background-color")); -
浮云间
正如该属性的 MDN 页面element.style中所述：该style属性用于获取和设置元素的内联样式。您的元素没有style设置背景颜色的属性 - 因此<yourelement>.style.backgroundColor返回空字符串。这就是getCompatedStyle存在的原因——允许您询问元素上实际的最终/应用的样式，而不仅仅是那些可能作为属性内联在元素上的样式style。
随时随地看视频慕课网APP
相关分类
JavaScript