Bagaimana untuk Mendapatkan Nilai Gaya daripada Elemen HTML menggunakan JavaScript Tulen?

Mendapatkan Nilai Gaya daripada Elemen HTML menggunakan JavaScript

Mendapatkan atribut gaya elemen HTML adalah penting untuk memanipulasi penampilannya secara dinamik. Artikel ini menyelidiki nuansa mendapatkan semula nilai gaya menggunakan JavaScript tulen, tanpa bantuan mana-mana perpustakaan luaran.

CurrentStyle vs. Computed Properties

Untuk mengakses nilai gaya, kita perlu membezakan antara gaya sebaris (ditakrifkan dalam atribut gaya elemen) dan sifat yang dikira (yang digunakan sebenar gaya).

Internet Explorer menggunakan sifat element.currentStyle untuk mendapatkan semula gaya sebaris, yang menyimpan nilai dalam unit asalnya.

Mozilla dan penyemak imbas moden yang lain bergantung pada kaedah document.defaultView.getComputedStyle untuk menyediakan sifat yang dikira. Nilai ini dinormalisasi kepada piksel, memberikan perwakilan yang konsisten merentas penyemak imbas.

Penyelesaian Silang Penyemak Imbas

Fungsi berikut menawarkan penyelesaian merentas penyemak imbas untuk mendapatkan kedua-dua sebaris dan gaya dikira:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units 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

Untuk mendapatkan semula sifat lebar sebaris elemen dengan id "kotak" (ditetapkan melalui teg gaya):

alert (getStyle(document.getElementById("box"), "width"));

Untuk mendapatkan semula sifat lebar yang dikira, yang mengambil masa mengambil kira sebarang gaya berlatarkan atau diwarisi:

alert (getStyle(document.getElementById("box"), "width"));

Had

Fungsi ini tidak mengendalikan nilai warna dengan sempurna. Pelayar moden akan mengembalikan warna dalam tatatanda rgb, manakala IE akan mengekalkan definisi asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Gaya daripada Elemen HTML menggunakan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!