Question

如果我有这个：

.box{
  color: #FF3010;
  background: hsl(0,90%,40%);
}

然后这个：

var box = document.querySelector(".box");
var result = document.querySelector(".result");
result.innerHTML = "BG color: "+window.getComputedStyle(box).backgroundColor;
result.innerHTML += "<br>";
result.innerHTML += "color:"+window.getComputedStyle(box).color;

问题是它总是以rgb打印值。所以，我有两个问题：

是否可以获得css中写的值？
是否可以将颜色强制为hsl而不是rgb？

Answer 1

您有两种方法可以获取dom元素（不是CSS）的实时样式，但不能获取hsl，而只能获取rgb / rgba字符串。

var style = window.getComputedStyle(element).getPropertyValue('background-color')

var style = cell.computedStyleMap().get('background-color').toString();

问您的问题：

您可以通过两种方式获得它：

a。使用CSSAPI。您可以在mdn上查看文档。

b。使用mutationobserver，如果值被某些更改，则可以从oldvalue获取它。
您不能直接获取hsl，但是可以通过上述两种方法获取rgb。然后将其更改为hsl，如果您的hsl与html格式匹配，则可以直接使用hsl。 html格式的hsl不是[0-1]，而是h是[0-360]，而s＆l是％。

顺便说一句，我只是尝试在Web中使用HSL，但这与现实不符。黄色比紫色浅，绿色比蓝色浅。 rgb（0，255，0）比（123，0，123）更轻，尽管最后一个比hsl中的上述内容更轻。

用javascript获取hsl颜色

1 个答案: