Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML Merentasi Pelayar Berbeza?

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;
  }
}

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!