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メソッドしかないように見えるa が返されますtoString()。色をRGBトリプレットまたは幅のように便利なものに解析することを望んでいました。

色を解析するための API はありますか、それともまだ仕様が定められていませんか?

（文字列を手で解析できることは知っていますが、それは問題ではありません）

4

3 に答える 3

1

あなたの前提はかなり混乱しています...

CSS Typed OM は、作成された値を解析して内部に保存されている CSS 値を取得することを目的としています。

この API は、現在の API がそのフォーマットされた値のみを返すという事実を回避することを意図しているため、標準化されたフォーマットされた値が必要な場合に使用しても意味がありません。

したがって、標準化されたフォーマットされた値が本当に必要な場合は、次のルールに従って <color> コンポーネントをシリアル化する仕様ごとgetComputedStyleに使用します。

  • <color> が解決された値または計算された値のコンポーネントである場合、次のようにrgb()またはrgba()関数表記を使用して色を返します。

    1. rgb()色のアルファ コンポーネントが 1 に等しい場合、不透明色と同等の機能のシリアル化を返します。
    2. 色のアルファ コンポーネントが 1 に等しくない場合は、rgba()不透明でない色と同等の機能のシリアル化を返します。

つまり、不透明な場合は常に になりrgb()、アルファがある場合は常に になり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

この答えからこのキャンバスハックを使用して、常に16進コードを取得できます。

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 に答える