使用javascript获取HSL颜色

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值形式打印出值。所以，我有两个问题：

1. 是否可以获得按css编写的值？
2. 是否可以强制使用hsl颜色而不是rgb？

- Vandervals

---

请问如何将HSL颜色转换为RGB颜色？ - Sergiu Paraschiv

那很有趣，非常有趣，但我仍然想知道问题1的答案，以及是否有一种方法来强制执行。 - Vandervals

你可以获取选择器的精确CSS定义：https://dev59.com/hHRC5IYBdhLWcg3wW_pk - Sergiu Paraschiv

Answer 1

你有两种方法可以获取DOM元素的实时样式（不是CSS），但你无法获得HSL，只能获取RGB / RGBA字符串。

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

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

请提出你的问题：

1. 你可以通过两种方式获得它：

   a. 使用CSSAPI。你可以在MDN上查看文档。

   b. 使用MutationObserver，如果值被某些东西更改，你可以从oldvalue中获取它。

2. 你不能直接获得HSL，但你可以通过以上两种方式获得RGB。然后将它们转换为HSL，如果你的HSL与HTML格式匹配，你可以直接使用HSL。HTML格式HSL不是[0-1]，而是H [0-360]，S和L带有%。

顺便说一句，我刚试着在网页中使用HSL，但它与现实不符。黄色比紫色更浅，绿色比蓝色更浅。RGB（0, 255, 0）比（123, 0, 123）更亮，尽管后者在HSL中比前者更亮。

- defend orca