Der Wert der Eigenschaft „Hintergrundkürzel' wird beim Versuch, HTMLElement.style aufzurufen, falsch erweitert

Question

Im Stil des Elements habe ich einige Inline-CSS-Deklarationen, einschließlich einer Kurzdeklaration für den Hintergrund

<style>
  :Wurzel{
    --bg-white: rgba(255, 255, 255, 0);
  }
</style>

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

Bei der Iteration über HTMLElement.style sehen die Kurzschrifteigenschaften jedoch so aus, als wären sie falsch erweitert

for (const deklaration von Array.from(target.style)) {
   const value = target.style.getPropertyValue(declaration)

   console.log(`${declaration}: ${value}`)
 }

Dies sollte gemäß der HTMLElement.style-Dokumentation auf MDN als background-color: var(--bg-white) ausgegeben werden, aber ich erhalte background-color: ' '

Erweiterte Abkürzungseigenschaften. Wenn Sie style="border-top: 1px Solid black" festlegen, werden die normalen Eigenschaften (border-top-color, border-top-style und border-top-width) festgelegt.

Ist jemand auf diese Situation gestoßen?

Answer 1

使用Array.from(target.style)获取target.style的默认迭代器的问题。它不包括背景属性。根据规范，速记属性已扩展到其各个部分。

一切都在代码中进行了解释。

感谢@t.niese 在评论中提供的提示。

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

<script>

 const target = document.querySelector('#test');
 
 // style is itarable
 console.log(target.style[Symbol.iterator]);
 
 // but doesn't include background in the iterator
 console.log(...target.style);
 
 // but background is iterable!
 console.log(Object.getOwnPropertyDescriptor(target.style, 'background'));
 
 // we can see it in Object.keys
 console.log(Object.keys(target.style).filter(name => name === 'background'));
 
 // so we can iterate it anyway
 for(const k in target.style){
    if(k === 'background'){
      console.log(target.style[k]);
    }
 }
 
   // Object.entries works too
 console.log(Object.entries(target.style).filter(([name]) => name === 'background'));
 
 // or access directly
 console.log(target.style.getPropertyValue('background'));
 console.log(target.style.background);
 
</script>

Answer 2

如果您使用HTMLElement.style，它将返回通过style属性直接应用（而不是计算）的内容。

在这种情况下，浏览器无法知道 background: var(--bg-white); 中的 var(...) 将解析什么并它将包含哪些 background-... 属性（变量的内容将放置在 var(...) 语句所在的位置，然后结果值将是已解析。

所以如果你例如有 --bg-white: content-box Radial-gradient(crimson, skyblue); 那么你的 --bg-white 实际上会影响多个属性。