Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendapatkan Nilai Gaya daripada Elemen HTML menggunakan JavaScript Tulen?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-20 22:32:121054semak imbas

How to Retrieve Style Values from HTML Elements using Pure JavaScript?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn