首页  >  问答  >  正文

尝试调用 HTMLElement.style 时背景简写属性的值错误地扩展

<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粉269530053P粉269530053434 天前457

全部回复(2)我来回复

  • P粉413307845

    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>

    回复
    0
  • P粉436410586

    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 实际上会影响多个属性。

    回复
    0
  • 取消回复