


Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML Merentasi Pelayar Berbeza?
Dec 01, 2024 am 07:19 AMCara Mendapatkan Nilai Gaya Elemen HTML dalam JavaScript
Mendapatkan semula nilai gaya daripada elemen HTML adalah penting untuk memanipulasi penampilan elemen secara dinamik. Walaupun menetapkan gaya menggunakan JavaScript adalah mudah, mengakses gaya yang ditakrifkan dalam teg gaya boleh menjadi rumit.
Pertimbangan Merentas Penyemak Imbas
Mengakses gaya elemen memerlukan pendekatan merentas penyemak imbas. Internet Explorer menggunakan hartanya sendiri, currentStyle, manakala penyemak imbas lain mengikut standard W3C dan menggunakan document.defaultView.getComputedStyle.
Fungsi Silang Penyemak Imbas Tersuai
Untuk mengendalikan silang -penyemak imbas tidak konsisten, fungsi tersuai selalunya bekerja:
function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE 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; } }
Penggunaan
Untuk mendapatkan semula sifat gaya sesuatu elemen:
var element = document.getElementById("box"); var width = getStyle(element, "width");
Pertimbangan Semasa
Fungsi di atas mungkin tidak mengendalikan semua bekas tepi, terutamanya untuk warna yang nilai yang dikembalikan mungkin berbeza antara IE dan pelayar lain.
Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
