Bagaimana untuk Mendapatkan Nilai Gaya Dikira daripada Elemen HTML Menggunakan JavaScript?

Mengakses Gaya daripada Elemen HTML dengan JavaScript

Soalan:

Bagaimana saya boleh mendapatkan semula nilai gaya dikira unsur HTML menggunakan JavaScript, khususnya apabila gaya ditakrifkan dalam tag?

Penyelesaian:

Untuk mendapatkan nilai gaya yang dikira, adalah perlu untuk mengakses gaya pengiraan elemen. Terdapat dua pendekatan, dengan kaedah DOM Tahap 2 standard yang disokong oleh kebanyakan penyemak imbas dan sifat elemen IE-specific.currentStyle.

Kaedah Standard (W3C):

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView && defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
}

Di sini, nama sifat mestilah dalam format dipisahkan sempang (cth., "saiz fon"). Nilai akan dikembalikan dalam piksel.

Kaedah IE:

if (el.currentStyle) {
  styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
    return letter.toUpperCase();
  });
  value = el.currentStyle[styleProp];
  if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
    // Convert non-pixel units to pixels
    ...
  }
}

IE menjangkakan nama harta berada dalam format camelCase dan mengembalikan nilai dalam unit yang ditentukan. Ambil perhatian bahawa kaedah ini mempunyai had tertentu.

Contoh Penggunaan:

var element = document.getElementById("box");
var width = getStyle(element, "width");
console.log("Width: " + width);

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