Bagaimanakah saya boleh mendapatkan semula semua peraturan CSS yang mempengaruhi elemen dalam JavaScript tulen?

Menentukan Semua Peraturan CSS yang Mempengaruhi Elemen dalam JavaScript Tulen

Dalam pembangunan web, memeriksa helaian gaya mentah yang dimuatkan oleh penyemak imbas hanya menyediakan sebahagian pemahaman tentang peraturan CSS yang digunakan pada elemen. Ini kerana penyemak imbas menyusun semua peraturan CSS dan menerapkannya pada elemen berdasarkan warisan, menghasilkan pepohon warisan kompleks yang tidak kelihatan serta-merta dalam lembaran gaya.

Untuk pembangun yang mencari penyelesaian JavaScript tulen untuk menghasilkan semula ciri ini, mendapatkan semula maklumat terperinci tentang peraturan CSS yang dikira yang mempengaruhi elemen menimbulkan cabaran yang ketara tanpa bergantung pada pemalam penyemak imbas tambahan. Walau bagaimanapun, berikut ialah penyelesaian yang komprehensif:

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 mengambil elemen sebagai input dan mengembalikan tatasusunan yang mengandungi teks CSS untuk setiap peraturan yang sepadan.

Untuk menggambarkan penggunaannya, pertimbangkan perkara berikut HTML dan CSS:

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

Dalam contoh ini, fungsi mengenal pasti dua CSS yang sepadan peraturan: satu menyatakan warna merah untuk semua

elemen dan satu lagi menetapkan saiz fon kepada 20 piksel untuk elemen dengan ID #description.

Tatasusunan yang dikembalikan membenarkan penerokaan lanjut bagi setiap butiran peraturan dengan merujuk dokumentasi objek CSSRule. Pendekatan ini menyediakan kaedah yang komprehensif dan serasi penyemak imbas untuk mengekstrak peraturan CSS yang dikira yang digunakan pada elemen tanpa memerlukan pemalam tambahan, membolehkan pembangun memeriksa dengan mendalam dan menyahpepijat gaya mereka.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mendapatkan semula semua peraturan CSS yang mempengaruhi elemen dalam JavaScript tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!