Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mendapatkan Peraturan CSS Berkenaan Secara Program untuk Elemen dalam JavaScript?
Mendapatkan 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:
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!