CSS Types OF -- 解析背景颜色？

Question

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，或者尚未指定？

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

Answer 1

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

var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;

Answer 2

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

Answer 3

你的前提很混乱...

CSS 类型化 OM 旨在检索 CSS 值，因为它们是通过解析 authored 值在内部存储的。

如果你想要一个标准化的格式化值，那么使用它没有任何意义，因为这个API实际上是为了规避当前API这一事实]s 仅 return 格式化值 .

因此，如果您真的想要标准化格式的值，只需使用 getComputedStyle，per specs 将根据这些规则序列化组件：

If <color> is a component of a resolved or computed value, then return the color using the rgb() or rgba() functional notation as follows:

If the alpha component of the color is equal to one, then return the serialization of the rgb() functional equivalent of the opaque color.

If the alpha component of the color is not equal to one, then return the serialization of the rgba() functional equivalent of the non-opaque color.

换句话说，如果它是不透明的，它将始终是 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 引入的许多新格式），这意味着您实际上必须编写更多代码来处理所有可能的值。

CSS Types OF -- 解析背景颜色？

CSS Typed OM -- parsing background color?

javascript

css

cssom

css-houdini