Bagaimana untuk Mencari Asal Peraturan CSS yang Digunakan pada Elemen dalam JavaScript?

Mencari Asal Usul Peraturan CSS Digunakan pada Elemen

Apabila penyemak imbas memaparkan halaman web, ia menyusun peraturan CSS daripada pelbagai helaian gaya dan menerapkannya pada elemen individu. Pembangun selalunya perlu memeriksa hierarki warisan ini untuk memahami isu penggayaan atau memanipulasi elemen secara pengaturcaraan.

Walau bagaimanapun, menghasilkan semula ciri ini dalam JavaScript tulen tanpa pemalam penyemak imbas boleh menjadi mencabar. Untuk menangani perkara ini, kami menyediakan penyelesaian yang serasi merentas penyemak imbas:

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 semua peraturan CSS yang digunakan padanya. Sebagai contoh, memanggil css(document.getElementById('elementId')) akan menyediakan tatasusunan dengan setiap elemen yang mewakili peraturan CSS yang digunakan pada elemen yang ditentukan.

Dengan memanfaatkan penyelesaian ini, pembangun boleh mendapatkan cerapan tentang sumber peraturan CSS dan mengurus penggayaan elemen dengan lebih berkesan, tanpa bergantung pada pemalam penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mencari Asal Peraturan CSS yang Digunakan pada Elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!