Bagaimanakah Saya Boleh Dapatkan Semua Peraturan CSS Berkenaan untuk Elemen Menggunakan JavaScript Tulen?

Mencari Peraturan CSS Berkenaan dengan Elemen dengan JavaScript

Dalam pembangunan web, mengakses elemen CSS kelas atau ID tertentu ialah tugas biasa, sering dibantu oleh alatan dan API. Walau bagaimanapun, penyemak imbas menyusun semua peraturan CSS yang berkenaan daripada pelbagai sumber untuk menentukan penampilan elemen. Bagaimanakah kita boleh meniru fungsi ini dalam JavaScript tulen, tanpa bergantung pada pemalam penyemak imbas?

Mengenal pasti Peraturan CSS Dikira

Pertimbangkan contoh HTML dan CSS berikut:

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

<p>

Dalam kes ini, elemen p#description mewarisi dua peraturan CSS: warna merah dan saiz fon 20px. Matlamatnya adalah untuk menentukan asal usul peraturan ini.

Pelaksanaan JavaScript

Untuk mencapainya, kami boleh menggunakan fungsi JavaScript berikut:

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

var rules = css(document.getElementById('elementId'));

Pembolehubah peraturan kini akan mengandungi tatasusunan semua CSS peraturan yang terpakai pada elemen yang dipilih.

Nota:

Fungsi ini bergantung pada kaedah Element.matches(), yang memerlukan polyfill keserasian merentas penyemak imbas untuk penyemak imbas yang lebih lama . Walau bagaimanapun, ia menyediakan kaedah yang pantas dan cekap untuk mengenal pasti peraturan CSS tanpa pemalam penyemak imbas tambahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan Semua Peraturan CSS Berkenaan untuk Elemen Menggunakan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!