Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Dapatkan Semua Peraturan CSS yang Digunakan pada Elemen Tertentu Menggunakan JavaScript Tulen?

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

Susan Sarandon
Lepaskan: 2024-12-19 07:06:14
asal
226 orang telah melayarinya

How Can I Retrieve All CSS Rules Applied to a Specific Element Using Pure JavaScript?

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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;

}

Salin selepas log masuk

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:

1

2

3

4

5

6

<style type="text/css">

    p { color :red; }

    #description { font-size: 20px; }

</style>

 

<p>

Salin selepas log masuk

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

1

2

3

4

[

    "p { color: red; }",

    "#description { font-size: 20px; }"

]

Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan