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

Answer 2

只需在@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]) }

代码取自此人Can I force jQuery.css("backgroundColor") returns on hexadecimal format?

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

2 个答案: