P粉4133078452023-09-04 20:05:48
使用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粉4364105862023-09-04 17:12:59
如果您使用HTMLElement.style
,它将返回通过style
属性直接应用(而不是计算)的内容。
在这种情况下,浏览器无法知道 background: var(--bg-white);
中的 var(...)
将解析什么并它将包含哪些 background-...
属性(变量的内容将放置在 var(...)
语句所在的位置,然后结果值将是已解析。
所以如果你例如有 --bg-white: content-box Radial-gradient(crimson, skyblue);
那么你的 --bg-white
实际上会影响多个属性。