Bagaimanakah Saya Boleh Mendapatkan Nilai Gaya Elemen HTML dalam JavaScript Tanpa Menggunakan Perpustakaan Luaran?

Mendapatkan Nilai Gaya Elemen HTML dalam JavaScript

Untuk mendapatkan maklumat gaya daripada elemen HTML yang telah digayakan menggunakan tag tanpa menggunakan perpustakaan, anda boleh mengakses gaya yang dikira dan bukannya gaya sebaris.

Keserasian Merentas Pelayar

IE menggunakan sifat element.currentStyle, manakala penyemak imbas lain laksanakan dokumen DOM Tahap 2.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp) kaedah. Untuk mengendalikan perbezaan ini, fungsi penyemak imbas silang disediakan:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // Sanitize property name to CSS notation (e.g., 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;
  }
}

Contoh Penggunaan untuk Coretan Kod Anda

Untuk mendapatkan nilai lebar dalam coretan kod yang disediakan , gunakan yang berikut:

var boxWidth = getStyle(document.getElementById("box"), "width");

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Nilai Gaya Elemen HTML dalam JavaScript Tanpa Menggunakan Perpustakaan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!