Bagaimana untuk Mendapatkan Nilai Harta CSS untuk Elemen HTML dalam JavaScript?

Dapatkan Nilai Harta CSS untuk Elemen HTML dalam JavaScript

Dalam pembangunan web, memanipulasi sifat CSS secara dinamik boleh meningkatkan pengalaman dan antara muka pengguna. Dengan JavaScript, mengakses sifat ini adalah mudah.

Dalam senario anda, fail CSS dipautkan ke halaman HTML dan anda perlu mendapatkan semula sifat tertentu (cth., warna) untuk div dengan nama kelas " susun atur." Begini cara untuk mencapainya menggunakan JavaScript:

Pilihan 1: Menghuraikan Helaian Gaya Dokumen (Tidak Disyorkan)

Penjelasan:
Kaedah ini melibatkan pengulangan secara manual melalui dokumen .styleSheets membantah dan menghuraikan kandungannya untuk mencari sifat yang diingini. Walau bagaimanapun, pendekatan ini tidak disyorkan kerana ia boleh menjadi sukar digunakan, terutamanya untuk fail CSS yang kompleks atau apabila anda perlu mendapatkan semula sifat untuk berbilang elemen.

Pilihan 2: Meniru Elemen dan Menggunakan Gaya Dikira (Diutamakan)

Penjelasan:
Kaedah ini lebih cekap dan memberikan hasil yang tepat. Ia melibatkan mencipta elemen dengan nama kelas yang sama dengan elemen sasaran dan kemudian mengakses gaya pengiraan elemen yang dicipta. Gaya yang dikira mewakili gaya sebenar yang digunakan pada elemen, termasuk gaya yang diwarisi dan sebarang pengubahsuaian yang dibuat melalui helaian gaya pengguna atau JavaScript.

Kod JavaScript:

<code class="javascript">function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};</code>

Bukan -Pertimbangan Gaya Sebaris

Jika anda ingin mendapatkan sifat gaya yang diwarisi tanpa definisi gaya sebaris, anda boleh mengalih keluar gaya sebaris buat sementara waktu dan kemudian mendapatkan semula nilai yang diwarisi.

Kod JavaScript:

<code class="javascript">function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}</code>

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