如何在CSSStyleDeclaration对象上设置HSL颜色？

Question

如何在CSSStyleDeclaration对象上设置HSL颜色？

//CSS
background-color: hsl(155,100%,30%);

//JavaScript
divElement.style.backgroundColor = ?;

我不想在javascript中使用HEX值或颜色名称。

请提供建议。

W3C标准链接也会非常有帮助。

我犹豫是否将hsl字符串设置为颜色，因为我没有在W3C CSSOM或DOM标准中找到它。

- P K

Answer 1

只需将其设置为字符串

divElement.style.backgroundColor = "hsl(155,100%,30%)";

示例：http://jsfiddle.net/maniator/gg7JN/

- Naftali

---

此外，需要注意的是在DOM中，似乎总是将其转换回RGB。即使手动设置style属性字符串也是如此。然而我不知道这种行为是否在规范中有定义，或者它是否只是浏览器的行为。当你需要HSL声明时（例如，你只想对色调值进行动画处理），这可能会引起一些问题。 - Tarulia

在 Jest 测试中设置 hsl 代码不被接受？如果设置 rgb 则可以正常工作。 - Gaurav Soni

Answer 2

您需要w3标准，第4.2.4节。

从网站复制的示例：

• { color: hsl(0, 100%, 50%) } /* 红色 */
• { color: hsl(120, 100%, 50%) } /* 酸橙色 */
• { color: hsl(120, 100%, 25%) } /* 暗绿色 */
• { color: hsl(120, 100%, 75%) } /* 浅绿色 */
• { color: hsl(120, 75%, 75%) } /* 淡绿色等等 */

注意：我并不是说Neal的答案是错误的 - 您可以像Neal说的那样简单地使用hsl字符串。这些示例是针对CSS文件的。

实际上，您想要的允许您像哈希颜色或RGB一样轻松使用CSS样式的HSL的行是标准第4.0节，它只是说：

是关键字或数字规范。

此后的部分定义了颜色类型：关键字（fuchsia），哈希格式（#ffcc88），rgb/a格式（rgba(255,255,255,0.1)）或hsl/a格式（hsla(0, 100%, 50%, 0.9)）。任何这些都可以在需要css颜色时使用。

- Scott Mermelstein