嘗試呼叫 HTMLElement.style 時背景簡寫屬性的值錯誤地擴展
P粉269530053
2023-09-03 21:10:48
<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>
使用
Array.from(target.style)
取得target.style
的預設迭代器的問題。它不包括背景屬性。根據規範,速記屬性已擴展到其各個部分。一切都在程式碼中進行了解釋。
感謝@t.niese 在評論中提供的提示。
如果您使用
HTMLElement.style
,它將傳回透過style
屬性直接套用(而不是計算)的內容。在這種情況下,瀏覽器無法知道
background: var(--bg-white);
中的var(...)
將解析什麼並它將包含哪些background-...
屬性(變數的內容將放置在var(...)
語句所在的位置,然後結果值將是已解析。所以如果你例如有
--bg-white: content-box Radial-gradient(crimson, skyblue);
那麼你的--bg-white
實際上會影響多個屬性。