HTMLElement.style を呼び出そうとすると、背景短縮プロパティの値が正しく展開されません。

Question

要素のスタイルには、背景の短縮宣言を含むいくつかのインライン CSS 宣言があります

<style>
  ：根{
    --bg-white: rgba(255, 255, 255, 0);
  }
</スタイル>

<div style="background: var(--bg-white); ... "></div>

しかし、HTMLElement.style を反復処理すると、短縮プロパティが誤って展開されているように見えます

for (Array.from(target.style) の const 宣言) {
   const 値 = target.style.getPropertyValue(宣言)

   console.log(`${宣言}: ${値}`)
 }

これにより、MDN の HTMLElement.style ドキュメントに従って background-color: var(--bg-white) が出力されるはずですが、background-color: が表示されます。 ' '

<ブロック引用>

展開された略語プロパティ。 style="border-top: 1px Solid black" が設定されている場合、通常のプロパティ (border-top-color、border-top-style、border-top-width) が設定されます。

この状況に遭遇した人はいますか?

Answer 1

Array.from(target.style) を使用して target.style のデフォルトのイテレータを取得する際に問題が発生しました。背景プロパティは含まれません。仕様によれば、速記プロパティはそのさまざまな部分に拡張されています。

すべてはコードで説明されています。

コメントでヒントをくれた @t.niese に感謝します。

リーリー

Answer 2

HTMLElement.style を使用すると、style 属性を介して (計算ではなく) 直接適用されたものが返されます。

この場合、ブラウザはバックグラウンドの var(...) が何を解析するのか、var(--bg-white); が何を解析するのかを知る方法がありません。 background-... プロパティが含まれます (変数の内容は var(...) ステートメントがある場所に配置され、結果の値が解析されます。

したがって、たとえば

--bg-white: content-box Radial-gradient(crimson, skyblue); がある場合、--bg-white は実際には Multiple に影響します。プロパティ。