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。

score 4 · Accepted Answer

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'];
}

score 0 · Accepted Answer

只是在@Ixe 答案中添加注释。

您可能希望使用此函数将值从 RGB 转换为 HEX：

Javascript

function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }

例子

function toHex(value) { return "#" + hex(value[0]) + hex(value[1]) + hex(value[2]) }

2 回答 2