0 

const box = document.getElementById('rb');

console.log(box.computedStyleMap().get('background-color'))
.red {
  background-color: #FF0000;
}

.box {
  width: 100px;
  height: 100px;
}
<div id="rb" class="box red"></div>

使用新的 CSS 类型对象模型，我试图获得这个 div 的背景颜色。它给了我一个CSSStyleValue似乎只有一种方法的toString()方法。我希望它将颜色解析为 RGB 三元组或其他有用的东西，就像它对宽度所做的那样。

是否有用于解析颜色的 API，或者尚未指定？

（我知道我可以手动解析字符串，这不是问题）

4

3 回答 3

1

您可以使用此答案中的此画布 hack 来始终获得十六进制代码：

https://stackoverflow.com/a/5999319/2095953

var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;
于 2020-03-05T00:10:32.257 回答
1

你的前提很混乱...

CSS Typed OM 旨在检索 CSS 值，因为它们已通过解析创作的值在内部存储。

如果你想要一个标准化的格式化值，那么使用它没有真正的意义，因为这个 API 真的是为了规避当前 API 只返回那个格式化值的事实。

因此，如果您真的想要一个标准化的格式化值，只需使用getComputedStylewhich per specs将根据以下规则序列化 <color> 组件：

  • 如果 <color> 是解析值或计算值的组成部分，则使用rgb()或rgba()函数表示法返回颜色，如下所示：

    1. 如果颜色的 alpha 分量等于 1，则返回rgb()不透明颜色的功能等价物的序列化。
    2. 如果颜色的 alpha 分量不等于 1，则返回rgba()非不透明颜色的功能等价物的序列化。

换句话说，如果它是不透明的，它将永远是rgb()，如果它有 alpha ，那么永远是rgba()。

document.querySelectorAll('.test > div').forEach( elem => {
  console.log( 'formatted as', getComputedStyle(elem)['background-color'] );
} );
.named-color { background-color: magenta; }
.currentcolor { background-color: currentColor; }
.no-alpha-hex { background-color: #FF00FF; }
.no-alpha-rgb { background-color: rgb(255,0,255); }
.no-alpha-rgb-perc { background-color: rgb(100%,0%,100%); }
.no-alpha-hsl { background-color: hsl(300deg, 100%, 50%); }
.no-alpha-rgba { background-color: rgb(255,0,255,1); }
.no-alpha-rgba-perc { background-color: rgb(100%,0%,100%,1); }
.no-alpha-hsla { background-color: hsl(300deg, 100%, 50%,1); }
.alpha-hex { background-color: #FF00FF80; }
.alpha-rgba { background-color: rgba(255,0,255,0.5); }
.alpha-rgba-perc { background-color: rgba(100%,0%,100%,0.5); }
.alpha-hsla { background-color: hsla(300deg, 100%, 50%,0.5); }

.test { color: magenta; }
.test > div {
  width: 100%;
  height: 5px;
}
<div class="test">
  <div class="named-color"></div>
  <div class="currentcolor"></div>
  <div class="no-alpha-hex"></div>
  <div class="no-alpha-rgb"></div>
  <div class="no-alpha-rgb-perc"></div>
  <div class="no-alpha-hsl"></div>
  <div class="no-alpha-rgba"></div>
  <div class="no-alpha-rgba-perc"></div>
  <div class="no-alpha-hsla"></div>
  
  <div class="alpha-hex"></div>
  <div class="alpha-rgba"></div>
  <div class="alpha-rgba-perc"></div>
  <div class="alpha-hsla"></div>
</div>

如果 CSS Typed OM 将引入 CSSColorValue，他们将不得不分别处理所有这些格式（以及 CSS-colors-4 引入的许多新格式），这意味着您实际上必须编写更多代码来处理所有可能的值。

于 2020-03-05T03:06:30.027 回答
-1

我相信 tl;dr 尚不支持，但已计划好：https ://github.com/w3c/css-houdini-drafts/issues/159

于 2020-03-05T02:19:12.380 回答