javascript - 使用 JS 获取 Html 元素背景颜色

Question

好吧，我有一个函数可以获取单击的 html 元素的背景颜色。然而，当我通过 css 设置背景色时，x.style.background 中对象的背景色只返回“”；

我的代码:HTML:

<li onclick="setCor(this)" id="vermelho" class="vermelho">Vermelho</li>

JS 函数:

function setCor(x){
    cor = x.style.backgroundColor;
}

还有 .vermelho 类:

.vermelho{
    background-color: #ff0000;
}

如何通过JS获取css值？我不能为此使用 jQuery，只需要 JS。

Answer 1

element.style 仅返回内联样式属性(参见此处:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style#Notes)

您最好使用 window.getComputedStyle() .然而，这会返回 RGB 颜色，如果您愿意，您可能希望将其转换为十六进制。

function setCor(x) {
  cor = window.getComputedStyle(x, null)['background-color'];
}