Bagaimanakah Saya Boleh Dapatkan Semua Peraturan CSS yang Digunakan pada Elemen Tertentu Menggunakan JavaScript Tulen?

Dapatkan Semua Peraturan CSS Dikaitkan dengan Elemen

Pemarahan penyemak imbas melibatkan penyusunan peraturan CSS dan menerapkannya pada elemen tertentu. Proses hierarki ini memuncak dalam penampilan akhir elemen, seperti yang ditunjukkan dalam alat penyemak imbas seperti Firebug. Walau bagaimanapun, mengakses peraturan CSS yang dikira ini tanpa pemalam tambahan memerlukan penyelesaian tersuai dalam JavaScript tulen.

Penyelesaian:

Untuk mendapatkan semula peraturan CSS bagi elemen, kami boleh memanfaatkan JavaScript DOM API dan objek CSSRule. Coretan kod berikut 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 peraturan CSS yang digunakan padanya. Untuk mendapatkan semula peraturan bagi elemen tertentu, cuma panggil css(document.getElementById('elementId')).

Contoh:

Pertimbangkan HTML dan CSS berikut:

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

<p>

Memanggil css(document.getElementById('description')) akan mengembalikan tatasusunan berikut:

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

Tatasusunan ini menyenaraikan dua peraturan CSS yang digunakan pada elemen, memberikan pemahaman yang jelas tentang penampilan terakhirnya.

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