嘗試呼叫 HTMLElement.style 時背景簡寫屬性的值錯誤地擴展
P粉269530053
P粉269530053 2023-09-03 21:10:48
0
2
470
<p>在元素的樣式中,我有一些內聯 CSS 聲明,包括背景的簡寫聲明</p> <pre class="brush:php;toolbar:false;"><style> :root{ --bg-white: rgba(255, 255, 255, 0); } </style> <div style="background: var(--bg-white); ... "></div></pre> <p>但當迭代 HTMLElement.style 時,速記屬性看起來像是錯誤擴充的</p> <pre class="brush:php;toolbar:false;">for (const declaration of Array.from(target.style)) { const value = target.style.getPropertyValue(declaration) console.log(`${declaration}: ${value}`) }</pre> <p>這應該根據MDN 上的HTMLElement.style 文件印出<code>background-color: var(--bg-white)</code> ,但我得到<code>background-color: ' '</code> </p> <blockquote> <p>擴展了簡寫屬性。如果設定 style="border-top: 1px Solid black",則會設定普通屬性(border-top-color、border-top-style 和 border-top-width)。 </p> </blockquote> <p>有人遇過這種狀況嗎? </p>
P粉269530053
P粉269530053

全部回覆(2)
P粉413307845

使用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>
P粉436410586

如果您使用HTMLElement.style,它將傳回透過style屬性直接套用(而不是計算)的內容。

在這種情況下,瀏覽器無法知道background: var(--bg-white); 中的var(...) 將解析什麼並它將包含哪些background-... 屬性(變數的內容將放置在var(...) 語句所在的位置,然後結果值將是已解析。

所以如果你例如有--bg-white: content-box Radial-gradient(crimson, skyblue); 那麼你的--bg-white 實際上會影響多個屬性。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板