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

Mendapatkan Nilai Gaya daripada Elemen HTML dalam JavaScript tanpa Perpustakaan

Apabila mengakses gaya elemen HTML melalui JavaScript, anda mungkin menghadapi cabaran dalam mendapatkan semula nilai yang ditetapkan oleh tag. Tidak seperti gaya sebaris yang ditetapkan melalui atribut elemen, gaya yang ditakrifkan dalam tag memerlukan pendekatan yang berbeza.

Untuk mendapatkan nilai gaya yang dikira, termasuk yang ditakrifkan dalam tag, anda boleh menggunakan fungsi pelayar silang berikut:

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

Penggunaan:

// Getting width style value
var width = getStyle(document.getElementById("box"), "width");

// Getting color style value (may differ between browsers)
var color = getStyle(document.getElementById("box"), "color");

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