JavaScript传递元素对象读取CSS属性时的异常问题

问题场景 #

点击带有.zz类的元素时，尝试通过this传递元素并读取其hover状态的background属性，控制台输出空字符串""，但预期结果为"purple"。

代码示例 #

JavaScript #

function bb(e) {
  var a = e.style.background;
  console.log(a);
}

CSS #

.zz {
    cursor:pointer;
    float:left;
    border:2px solid white;
    background:grey;
    color:black;
    margin-right:3vw;
    padding-left:2vw;
    padding-right:2vw;
}

.zz:hover {
    background:purple;
    color:white;
}

HTML #

<div onclick="bb(this)" class="zz">click me</div>

控制台结果 #

""  

预期结果 #

"purple"

原因分析 #

element.style只能读取元素的内联样式（即直接写在元素style属性中的样式），无法获取：

• 外部样式表或内部<style>标签中定义的类样式
• :hover这类伪类状态下的样式

你的代码中background属性是通过.zz和.zz:hover类定义的，并非内联样式，所以e.style.background自然返回空字符串。

解决方案 #

使用window.getComputedStyle()方法，该方法可以获取元素最终应用的所有计算样式（包括伪类样式）。修改后的JavaScript代码如下：

function bb(e) {
  // 获取元素hover状态下的计算样式
  const computedStyle = window.getComputedStyle(e, ':hover');
  // 获取背景色，也可以用backgroundColor获取纯颜色值
  const bg = computedStyle.background;
  console.log(bg);
}

补充说明 #

• getComputedStyle的第二个参数用于指定伪类（如:hover、:active），如果不需要伪类样式，可以省略该参数。
• 该方法返回的样式是浏览器计算后的完整值，比如background可能会输出"rgb(128, 0, 128) none repeat scroll 0% 0% / auto padding-box border-box"，如果只想获取颜色值，推荐使用computedStyle.backgroundColor，会直接返回对应颜色的RGB或十六进制值。

内容的提问来源于stack exchange，提问作者Ewo Ewo Ewo