Im Stil des Elements habe ich einige Inline-CSS-Deklarationen, einschließlich einer Kurzdeklaration für den Hintergrund
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?
使用
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实际上会影响多个属性。