Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS dengan Unit Asalnya dalam JavaScript?

Mendapatkan kembali Nilai Harta CSS dalam Unit Ditentukannya

Dalam pembangunan web, adalah penting untuk mendapatkan semula nilai sifat CSS seperti yang ditakrifkan pada asalnya , mengekalkan unit tertentu mereka. Walaupun kaedah getComputedStyle dan css() jQuery memberikan nilai dalam piksel, terdapat senario di mana mendapatkan nilai CSS mentah adalah penting. Begini cara anda boleh mencapai perkara ini dalam Google Chrome tanpa bergantung pada rangka kerja:

Pemeriksa Elemen Chrome

Pemeriksa elemen Chrome menawarkan ciri berharga: keupayaan untuk memaparkan nilai sifat CSS seperti yang ditetapkan, memberikan petunjuk visual untuk nilai yang dimaksudkan. Ini menunjukkan bahawa Chrome mempunyai keupayaan untuk mendapatkan semula maklumat ini secara pengaturcaraan.

Fungsi getMatchedStyle

Untuk mencapai ini dalam kod, kami menggunakan kaedah getMatchedCSSRules() untuk mendapatkan peraturan yang dipadankan , yang kemudiannya kami ulangi mengikut urutan keutamaan terbalik. Kami mengutamakan gaya elemen berbanding peraturan luaran dan menyemak sifat penting. Fungsi getMatchedStyle kelihatan seperti ini:

function getMatchedStyle(elem, property){
    // Element style has highest priority
    var val = elem.style.getPropertyValue(property);

    // Stop if important
    if(elem.style.getPropertyPriority(property))
        return val;

    // Get matched rules
    var rules = getMatchedCSSRules(elem);

    // Iterate rules backwards, prioritizing highest priority
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // Reset if more important or not yet set
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // Stop if important
            if(important)
                break;
        }
    }

    return val;
}

Contoh

Pertimbangkan HTML dan CSS berikut:

<div class="b">div 1</div>
<div>

div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

Dengan kod yang diberikan, lebar berikut ialah diambil:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Ini menyerlahkan keupayaan untuk mendapatkan semula nilai sifat CSS dalam unit yang ditentukan, memberikan fleksibiliti dan ketepatan yang lebih besar dalam tugasan manipulasi gaya berasaskan skrip.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS dengan Unit Asalnya dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!