Bagaimanakah Saya Boleh Menentukan Peraturan CSS Yang Mempengaruhi Elemen Tertentu Menggunakan JavaScript Sahaja?

Menentukan Peraturan CSS yang Mempengaruhi Elemen dalam JavaScript

Masalah:

Banyak alat pembangunan web menawarkan fungsi untuk memilih elemen berdasarkan kelas atau ID. Walau bagaimanapun, adalah mungkin untuk menyelidiki lebih mendalam proses pemaparan penyemak imbas dengan memeriksa helaian gaya CSS mentah yang mereka muatkan. Peraturan CSS disusun dan digunakan pada elemen daripada berbilang lembaran gaya, mewujudkan pepohon warisan yang rumit.

Soalan:

Bagaimanakah kita boleh meniru ciri ini dalam JavaScript tulen tanpa bergantung pada pelayar tambahan pemalam?

Contoh:

Untuk elemen tertentu seperti:

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

<p>

Elemen p#description ialah dipengaruhi oleh dua peraturan CSS: warna merah dan saiz fon 20px.

Jawapan:

Fungsi:

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

Penggunaan:

calling css(document.getElementById('elementId')) 

Fungsi ini mengembalikan tatasusunan yang mengandungi setiap peraturan CSS yang sepadan dengan yang diluluskan elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Peraturan CSS Yang Mempengaruhi Elemen Tertentu Menggunakan JavaScript Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!