Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML Merentasi Pelayar Berbeza?

Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML Merentasi Pelayar Berbeza?

DDD
Lepaskan: 2024-12-01 07:19:14
asal
972 orang telah melayarinya

How to Get an HTML Element's Style Values Across Different Browsers?

Cara 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;
  }
}
Salin selepas log masuk

Penggunaan

Untuk mendapatkan semula sifat gaya sesuatu elemen:

var element = document.getElementById("box");
var width = getStyle(element, "width");
Salin selepas log masuk

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan