Bagaimana untuk Mendapatkan Peraturan CSS Berkenaan Secara Program untuk Elemen dalam JavaScript?

Mengambil semula Peraturan CSS Berkenaan untuk Elemen

Pengenalan:
Pelayar web menggunakan gaya CSS daripada pelbagai helaian gaya untuk elemen untuk menjadikannya. Alat seperti Firebug mendedahkan maklumat ini, memaparkan pepohon warisan CSS untuk setiap elemen. Artikel ini menerangkan cara untuk meniru ciri ini dalam JavaScript tulen tanpa pemalam penyemak imbas.

Penyelesaian:
Untuk menentukan peraturan CSS yang digunakan pada elemen:

1. Dapatkan Helaian Gaya Dokumen: Akses tatasusunan helaian gaya yang dikaitkan dengan dokumen.
2. Lelarkan Peraturan CSS: Gelung setiap helaian gaya dan peraturannya .
3. Semak Kebolehgunaan: Gunakan kaedah padanan() untuk menentukan sama ada elemen sepadan dengan teks pemilih peraturan CSS.
4. Tangkap Peraturan Berkenaan: Jika padanan ditemui, tolak teks CSS ke dalam tatasusunan.

Berikut ialah contoh kod JavaScript untuk melaksanakan penyelesaian ini:

function css(el) {
    var sheets = document.styleSheets;
    var 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;
}

Untuk menggunakan fungsi ini, hubungi css(document.getElementById('elementId')). Ia akan mengembalikan tatasusunan yang mengandungi peraturan CSS yang digunakan sebagai rentetan.

Contoh:

Pertimbangkan contoh HTML dan CSS ini:

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

<p>

Meminta css(document.getElementById('description')) akan menghasilkan tatasusunan dengan dua elemen:

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

Fungsi ini menyediakan pendekatan serasi yang mudah dan merentas penyemak imbas untuk mendapatkan semula peraturan CSS yang berkenaan untuk mana-mana elemen tertentu dalam JavaScript tulen.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Peraturan CSS Berkenaan Secara Program untuk Elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!