Bagaimanakah Saya Boleh Mendapatkan Nilai Gaya Dikira untuk Elemen HTML Merentasi Pelayar Berbeza dalam JavaScript?

Mengekstrak Nilai Gaya Elemen HTML dalam Javascript

Untuk memperoleh atribut gaya yang diberikan melalui CSS sebaris atau teg gaya, anda perlu mengambil gaya yang dikira dan bukannya sifat gaya elemen sahaja. Ini melibatkan penggunaan kaedah yang serasi merentas penyemak imbas seperti document.defaultView.getComputedStyle dan element.currentStyle.

Keserasian Merentas Pelayar

Internet Explorer menggunakan element.currentStyle manakala pelayar lain mematuhi kaedah document.defaultView.getComputedStyle standard. Ambil perhatian bahawa IE menjangkakan nama sifat CSS dalam format camelCase, manakala format standard menggunakan sengkang.

Penukaran Unit pada IE

IE mengembalikan saiz dalam unit asal, manakala standard kaedah sentiasa bertukar kepada piksel. Fungsi getStyle yang disediakan mengambil kira perkara ini dengan menukar unit pada IE jika perlu.

Format Warna

Kaedah standard mengembalikan nilai warna dalam tatatanda RGB, manakala IE memaparkannya sebagai ditakrifkan. Fungsi getStyle mungkin tidak mengendalikan semua kes dengan sempurna, terutamanya untuk format warna.

Fungsi Tersuai untuk Mendapatkan Gaya Berkomputer

Fungsi getStyle berikut menyediakan pendekatan silang pelayar untuk mendapatkan semula gaya yang dikira:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    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;
  }
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Nilai Gaya Dikira untuk Elemen HTML Merentasi Pelayar Berbeza dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!