css 尝试调用www.example.com时，后台速记属性的值错误展开HTMLElement.style

w80xi6nr 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(132)

在元素的样式中，我有几个内联CSS声明，包括一个背景的简写声明

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

但是当遍历www.example.com时，shorthand属性看起来像是被错误地扩展了HTMLElement.style the shorthand property looks like it's wrongly expanded

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

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

这应该打印出background-color: var(--bg-white)每HTMLElement.style documentation on MDN，但我得到background-color: ''
展开速记属性。如果设置style ="border-top：1px solid black”，则改为设置手写体属性（border-top-color、border-top-style和border-top-width）。
以前有人遇到过吗？

css

来源：https://stackoverflow.com/questions/76541436/values-of-background-shorthand-property-wrongly-expanded-when-trying-to-call-htm

1条答案

按热度按时间

wrrgggsh1#

使用getComputedStyle()获取计算值。速记属性的扩展方式与style中的相同。
style只包含分配给元素的内联样式，不计算任何css属性（内联和继承）。所以在这种情况下background-color是空的。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

p{
  color:yellow
}

<style>
:root{
  --bg-white: black;
}
</style>
<p style="--border: 5px solid red; border: var(--border);background: var(--bg-white); padding: 10px">Test</p>

<script>

 const target = document.querySelector('p');
 console.log('getComputedStyle (global css property):', getComputedStyle(target).backgroundColor);
 console.log('getComputedStyle (global style):', getComputedStyle(target).color);
 console.log('getComputedStyle (inline css property):', getComputedStyle(target).borderColor);
 console.log('style (global css property):', target.style.backgroundColor);
 console.log('style (global style):', target.style.color);
 console.log('style (inline style):', target.style.padding);
 console.log('style (inline css property):', target.style.borderColor);

</script>

赞(0）回复(0）举报 2023-06-25

我来回答

css 尝试调用www.example.com时，后台速记属性的值错误展开HTMLElement.style

1条答案

相关问题

热门标签

最新问答