时间戳

首页 > 解决方案 > getComputedStyle 的规范中是否指定了颜色格式？

javascript - getComputedStyle 的规范中是否指定了颜色格式？

问题描述

我正在解析一个颜色字符串，以getComputedStyle从中获取、、、R和值。GBA

到目前为止（在 Chrome 和 Firefox 中），颜色值似乎总是以易于解析的格式rgb返回：rgba

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

但是，我无法在其MDN 页面上列出的任何规范中找到关于颜色格式的任何承诺。getComputedStyle

是否有任何颜色格式的保证getComputedStyle？还是完全取决于浏览器的实现？

我宁愿不必检查 HEX 和 HSLA 值（以及其他任何可能的值 - 我不完全确定）。

编辑：

用于在控制台中测试颜色值的快速代码片段：

console.log((str => {
    const div = document.createElement("div");
    div.style.backgroundColor = str;
    document.body.append(div);
    return getComputedStyle(div).backgroundColor;
})("magenta"));

标签： javascriptcssgetcomputedstylecssomcss-color

解决方案

CSSOM 没有直接说明这一点，而是引用了 css-color-4：

序列化一个 CSS 组件值依赖于组件，如下：

<color>
如果 <color> 是已解析值的组成部分，请参阅CSS Color 4 §4.6 Resolving <color> Values。

如果 <color> 是计算值的组成部分，请参阅CSS Color 4 §4.7 Serializing <color> Values。

出于 的目的getComputedStyle()，上述两行的含义相同。具体来说，第 4.7.2 节涵盖了大多数常用格式：

4.7.2. 序列化 sRGB 值

以下 sRGB 值的序列化形式：

  • 十六进制颜色
  • rgb()和rgba()价值观
  • hsl()和hsla()价值观
  • hwb()价值观
  • 命名颜色

是从计算值派生的，因此使用rgb()orrgba()形式（取决于 alpha 是否正好为 1），函数名称使用小写字母。

第 4.7.6 节介绍了系统颜色（计算为小写）、transparent（计算为rgba(0, 0, 0, 0)）和currentColor（计算为小写currentcolor）。

由于 css-color-4 引入了几种指定颜色的新方法，因此其他格式也存在其他部分，例如针对 LCH 值的§4.7.3、针对函数的§4.7.4color()等等。

这意味着，仅当指定的值采用 §4.7.2 中的任何格式时，getComputedStyle()才能保证来自的颜色值采用rgb()或rgba()格式，具体取决于 alpha 值。但是 §4.7.2 和 §4.7.6 涵盖了日常 CSS 中的绝大多数用例，因此仍然可以依赖它们。考虑到其他地方还没有真正支持异国情调的格式，在它们享受任何主流用途之前，可能不值得对它们进行测试。

推荐阅读