javascript - CSS Typed 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的背景色。它给了我一个CSSStyleValue似乎只有一个toString()方法。我希望它将颜色解析为RGB三元组或其他有用的东西，例如宽度。

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

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

最佳答案

您的前提很令人困惑...

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

如果您希望使用标准化的格式化值，那么使用它就没有任何意义，因为此API确实是为了规避当前API仅返回该格式化值的事实。

因此，如果您确实希望使用标准化的格式化值，请使用getComputedStyle，其中per specs将根据以下规则对组件进行序列化：


  
  如果是解析值或计算值的组成部分，则使用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引入的许多新格式），这意味着您实际上将不得不编写更多代码来处理所有可能的值。

关于javascript - CSS Typed OM-解析背景色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60534086/