Bagaimanakah Saya Boleh Mendapatkan Nilai Harta CSS Yang Ditakrifkan Pada Mulanya dengan Cekap?

Mengekstrak Nilai Harta CSS Elemen sebagai Set

Apabila perlu mendapatkan nilai sifat CSS sesuatu elemen seperti yang ditakrifkan pada mulanya, fungsi getMatchedStyle menawarkan penyelesaian. Fungsi ini berulang melalui peraturan CSS yang dipadankan dalam tertib keutamaan menurun, mengambil kira kedua-dua gaya elemen dan kepentingan sifat.

function getMatchedStyle(elem, property){
    var val = elem.style.getPropertyValue(property);
    if(elem.style.getPropertyPriority(property))
        return val;
    var rules = getMatchedCSSRules(elem);
    for(var i = rules.length; i--;){
        var important = r.style.getPropertyPriority(property);
        if(val == null || important){
            val = r.style.getPropertyValue(property);
            if(important)
                break;
        }
    }
    return val;
}

Dengan mempertimbangkan kepentingan sifat dan gaya elemen, getMatchedStyle mengembalikan nilai sifat CSS dengan tepat seperti yang ditetapkan dalam stylesheet.

Contoh Penggunaan

Pertimbangkan HTML dan CSS berikut kod:

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%; }
div#c.c  { width: 444px; }
x, div.a { width: 50%; }
.a       { width: 75%; }

Melaksanakan kod JavaScript berikut:

var d = document.querySelectorAll('div');

for(var i = 0; i <p>akan mengeluarkan:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Ini menunjukkan keupayaan fungsi untuk mengekstrak dengan tepat tetapkan nilai lebar CSS bagi elemen.