Bagaimana untuk Mendapatkan Nilai Gaya Elemen HTML dalam JavaScript Merentasi Pelayar?

Mendapatkan semula Nilai Gaya Elemen HTML dalam JavaScript

Untuk elemen dengan gaya yang ditakrifkan melalui teg gaya, seperti yang digambarkan di bawah:

<style>
#box {
  width: 100px;
}
</style>

<div>

Untuk mendapatkan nilai gaya menggunakan JavaScript, sifat elemen.style sahaja tidak akan mencukupi, kerana ia hanya menyediakan gaya sebaris atau yang ditakrifkan JavaScript.

Gaya Dikira

Kami perlu mengakses gaya terkira elemen , yang mewakili gaya sebenar yang digunakan padanya selepas mewarisi elemen induk dan mengambil kira peraturan CSS yang digunakan. Dalam JavaScript, kita boleh mendapatkan gaya yang dikira menggunakan dua kaedah:

1. Standard DOM (Pelayar Lain):

document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. Spesifik IE:

element.currentStyle[propertyName];

Walau bagaimanapun, IE menggunakan nama sifat camelCase (cth., "Saiz fon") dan mungkin mengembalikan saiz dalam unit bukan piksel, manakala kaedah standard menggunakan nama sifat sempang ( cth., "saiz fon") dan sentiasa menyediakan piksel nilai.

Penyelesaian Silang Penyemak Imbas

Untuk mendapatkan semula gaya yang dikira dalam cara yang serasi merentas penyemak imbas, gunakan fungsi berikut:

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

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