Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendapatkan Nilai Gaya CSS Elemen HTML Menggunakan JavaScript Tulen?
Bagaimana untuk Mendapatkan Nilai Gaya CSS Elemen HTML Menggunakan JavaScript Tulen?
- Linda Hamiltonasal
- 2025-01-05 07:40:38827semak imbas
Mengakses Nilai Gaya Elemen HTML dalam JavaScript
Seseorang mungkin menghadapi keperluan untuk mendapatkan semula gaya daripada elemen HTML yang telah ditakrifkan dalam lembaran gaya CSS. Sebagai contoh, pertimbangkan kod HTML dan CSS berikut:
<style>
#box { width: 100px; }
</style>
<body>
<div>
Hanya menggunakan JavaScript tulen tanpa sebarang perpustakaan, bagaimanakah anda boleh mendapatkan semula nilai untuk sifat lebar? Percubaan berikut selalunya mengakibatkan menerima nilai kosong:
alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));
Percubaan ini gagal kerana ia hanya berfungsi dengan gaya sebaris yang ditakrifkan dalam atribut gaya elemen. Untuk mendapatkan semula gaya yang dikira, pendekatan yang berbeza diperlukan.
Keserasian Merentas Penyemak Imbas
Mengakses gaya yang dikira memberikan cabaran kerana perbezaan antara penyemak imbas. Internet Explorer menggunakan sifat element.currentStyle, manakala penyemak imbas lain mengikut standard DOM Tahap 2 dengan document.defaultView.getComputedStyle. Selain itu, IE mengendalikan nama harta dengan dua atau lebih perkataan secara berbeza, menggunakan camelCase (cth., "maxHeight"). Penyemak imbas lain menjangkakan sempang untuk memisahkan perkataan (cth., "max-height").
Fungsi Silang Penyemak Imbas
Untuk menangani perbezaan merentas penyemak imbas ini, fungsi berikut boleh digunakan:
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
if (defaultView && defaultView.getComputedStyle) {
styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) {
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
Fungsi ini menyediakan keserasian merentas pelayar untuk mengakses gaya yang dikira, mengendalikan kedua-dua tingkah laku standard dan khusus IE. Ambil perhatian bahawa ia mungkin tidak mengendalikan semua kes, seperti warna, yang dikembalikan secara berbeza oleh penyemak imbas yang berbeza.
Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Gaya CSS Elemen HTML Menggunakan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!