Bagaimanakah Saya Boleh Memeriksa Pokok Pewarisan CSS Menggunakan JavaScript Tulen?

Memeriksa Pokok Pewarisan CSS menggunakan JavaScript

Pertimbangkan halaman web dengan elemen p dengan id "penerangan":

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p>

Apabila penyemak imbas memaparkan elemen ini, ia menggabungkan semua peraturan CSS yang berkenaan ke dalam satu pepohon warisan. Bagaimanakah kita boleh meniru ini dalam JavaScript tulen, tanpa bergantung pada pemalam penyemak imbas?

Penyelesaian:

Untuk memeriksa peraturan CSS yang digunakan pada elemen, kita boleh melintasi lembaran gaya dokumen dan padankan dengan pemilih elemen. Berikut ialah fungsi JavaScript merentas pelayar untuk mencapai ini:

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector 
        || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

Panggilan css(document.getElementById('description')) mengembalikan tatasusunan rentetan peraturan CSS yang digunakan pada elemen, dalam kes ini:

["p { color :red; }", "#description { font-size: 20px; }"]

Fungsi ini membolehkan pembangun mengakses sumber peraturan CSS yang dikira, membantu dalam penyahpepijatan dan memahami halaman web penggayaan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memeriksa Pokok Pewarisan CSS Menggunakan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!