cari

Rumah  >  Soal Jawab  >  teks badan

Nilai sifat trengkas latar belakang berkembang secara tidak betul apabila cuba memanggil HTMLElement.style

<p>Dalam gaya elemen, saya mempunyai beberapa pengisytiharan CSS sebaris, termasuk pengisytiharan singkatan untuk latar belakang</p> <pre class="brush:php;toolbar:false;"><style> :root{ --bg-white: rgba(255, 255, 255, 0); } </style> <div style="latar belakang: var(--bg-white); <p>Tetapi apabila melelakan ke atas HTMLElement.style, sifat trengkas kelihatan seperti ia tidak dikembangkan dengan betul</p> <pre class="brush:php;toolbar:false;">for (pengisytiharan const Array.from(target.style)) { nilai const = target.style.getPropertyValue(deklarasi) console.log(`${deklarasi}: ${value}`) }</pre> <p>Ini sepatutnya mencetak <code>background-color: var(--bg-white)</code> mengikut dokumentasi HTMLElement.style pada MDN, tetapi saya mendapat <code>background-color: ' '</kod> <blockquote> <p>Sifat singkatan dikembangkan. Jika anda menetapkan style="border-top: 1px Solid black", sifat biasa (border-top-color, border-top-style dan border-top-width) akan ditetapkan. </p> </blockquote> <p>Adakah sesiapa yang menghadapi situasi ini? </p>
P粉269530053P粉269530053519 hari yang lalu510

membalas semua(2)saya akan balas

  • P粉413307845

    P粉4133078452023-09-04 20:05:48

    Masalah menggunakan lelaran lalai Array.from(target.style)获取target.style. Ia tidak termasuk sifat latar belakang. Mengikut spesifikasi, sifat trengkas telah diperluaskan ke pelbagai bahagiannya.

    Semuanya diterangkan dalam kod.

    Terima kasih kepada @t.niese atas petua dalam komen.

    <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>

    balas
    0
  • P粉436410586

    P粉4364105862023-09-04 17:12:59

    Jika anda menggunakan atribut HTMLElement.style,它将返回通过style untuk menerapkannya secara langsung (bukannya mengiranya).

    Dalam kes ini, penyemak imbas tidak mempunyai cara untuk mengetahui di mana pernyataan background: var(--bg-white); 中的 var(...) 将解析什么并它将包含哪些 background-... 属性(变量的内容将放置在 var(...) itu dan kemudian nilai yang terhasil akan dihuraikan.

    Jadi jika anda sebagai contoh mempunyai --bg-white: content-box Radial-gradient(crimson, skyblue); 那么你的 --bg-white ia sebenarnya akan menjejaskan beberapa sifat.

    balas
    0
  • Batalbalas