Bagaimanakah Saya Boleh Memeriksa Pokok Pewarisan CSS Menggunakan JavaScript Tulen?

Memeriksa Pokok Pewarisan CSS dalam JavaScript

Dalam pembangunan web, adalah penting untuk memahami cara peraturan CSS digunakan pada elemen pada halaman web. Walaupun alatan penyemak imbas memberikan cerapan tentang pepohon warisan ini, bolehkah kami meniru analisis ini menggunakan JavaScript tulen?

Keperluan untuk Menghasilkan Semula Pewarisan CSS

Penyemak imbas menyusun peraturan CSS daripada pelbagai sumber dan menerapkannya pada elemen. Ini menghasilkan lata komprehensif yang mentakrifkan penampilan dan susun atur setiap elemen. Memeriksa pepohon warisan ini boleh menjadi penting untuk memahami gelagat visual halaman web.

Penyelesaian dalam JavaScript Tulen

Melaksanakan ciri ini dalam JavaScript tulen tanpa pemalam menimbulkan cabaran teknikal. Walau bagaimanapun, berikut ialah penyelesaian serasi silang penyemak imbas yang menawarkan anggaran yang munasabah:

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

Fungsi ini menerima elemen sebagai input dan mengembalikan tatasusunan yang mengandungi peraturan CSS yang digunakan pada elemen tersebut. Setiap elemen dalam tatasusunan mewakili peraturan tertentu.

Contoh Penggunaan

Untuk menunjukkan fungsi, pertimbangkan HTML dan CSS berikut:

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

<p>

Dalam contoh ini, elemen dengan id "penerangan" mempunyai dua peraturan CSS yang digunakan: warna merah dan saiz fon 20px. Memanggil css(document.getElementById('description')) akan mengembalikan tatasusunan dengan dua rentetan peraturan CSS.

Analisis Lanjut

Untuk mendapatkan maklumat yang lebih terperinci tentang setiap peraturan, anda boleh meneroka CSSRule dokumentasi objek.

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!