CSS类型OM——解析背景颜色

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的背景颜色。它给了我一个似乎只有toString()方法的CSSStyleValue。我希望它能将颜色解析为RGB三元组或其他有用的东西，就像它对宽度所做的那样。

是否有用于解析颜色的API，或者还没有明确说明？

(我知道我可以手动解析字符串，这不是问题所在(

您的前提非常令人困惑。。。

CSS Typed OM旨在检索CSS值，因为这些值是通过解析编写的值而内部存储的。

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

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

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

如果颜色的alpha分量等于1，则返回不透明颜色的rgb()函数等价物的序列化

如果颜色的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引入的许多新格式(，这意味着您实际上将不得不编写更多的代码来处理所有可能的值。

你可以使用这个答案中的画布破解来获得一个十六进制代码：

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

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

我相信tl；dr是，它还没有得到支持，但它是有计划的：https://github.com/w3c/css-houdini-drafts/issues/159

相关内容

最新更新

热门标签：