Bagaimana untuk Mendapatkan Nilai Gaya CSS Elemen HTML Menggunakan JavaScript Tulen?-tutorial css-php.cn

Bagaimana untuk Mendapatkan Nilai Gaya CSS Elemen HTML Menggunakan JavaScript Tulen?

Linda Hamilton

Lepaskan： 2025-01-05 07:40:38

asal

825 orang telah melayarinya

How to Retrieve an HTML Element's CSS Style Value Using Pure JavaScript?

Mengakses Nilai Gaya Elemen HTML dalam JavaScript

Seseorang mungkin menghadapi keperluan untuk mendapatkan semula gaya daripada elemen HTML yang telah ditakrifkan dalam lembaran gaya CSS. Sebagai contoh, pertimbangkan kod HTML dan CSS berikut:

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

Salin selepas log masuk

Hanya menggunakan JavaScript tulen tanpa sebarang perpustakaan, bagaimanakah anda boleh mendapatkan semula nilai untuk sifat lebar? Percubaan berikut selalunya mengakibatkan menerima nilai kosong:

alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));

Salin selepas log masuk

Percubaan ini gagal kerana ia hanya berfungsi dengan gaya sebaris yang ditakrifkan dalam atribut gaya elemen. Untuk mendapatkan semula gaya yang dikira, pendekatan yang berbeza diperlukan.

Keserasian Merentas Penyemak Imbas

Mengakses gaya yang dikira memberikan cabaran kerana perbezaan antara penyemak imbas. Internet Explorer menggunakan sifat element.currentStyle, manakala penyemak imbas lain mengikut standard DOM Tahap 2 dengan document.defaultView.getComputedStyle. Selain itu, IE mengendalikan nama harta dengan dua atau lebih perkataan secara berbeza, menggunakan camelCase (cth., "maxHeight"). Penyemak imbas lain menjangkakan sempang untuk memisahkan perkataan (cth., "max-height").

Fungsi Silang Penyemak Imbas

Untuk menangani perbezaan merentas penyemak imbas ini, fungsi berikut boleh digunakan:

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

Salin selepas log masuk

Fungsi ini menyediakan keserasian merentas pelayar untuk mengakses gaya yang dikira, mengendalikan kedua-dua tingkah laku standard dan khusus IE. Ambil perhatian bahawa ia mungkin tidak mengendalikan semua kes, seperti warna, yang dikembalikan secara berbeza oleh penyemak imbas yang berbeza.

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