3

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

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

//JavaScript
divElement.style.backgroundColor = ?;

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

请建议。

W3C 标准链接也会有很大帮助。

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

4

2 回答 2

12

只需将其设置为字符串

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

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

于 2013-07-22T16:14:02.557 回答
3

您想要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%) } /* 柔和的绿色，等等 */

注意：我并不是说尼尔的答案是错误的——你可以hsl像尼尔所说的那样简单地使用一个字符串。这些示例适用于 css 文件。

您想要允许您像散列颜色或 rgb 一样轻松使用 css 样式 hsl 的实际行是标准部分 4.0，它只是说：

<color> 是关键字或数字规范。

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

于 2013-07-22T16:16:58.820 回答