Bagaimana untuk mengekstrak sifat CSS secara dinamik menggunakan JavaScript?-tutorial css-php.cn

Bagaimana untuk mengekstrak sifat CSS secara dinamik menggunakan JavaScript?

Mary-Kate Olsen

Lepaskan： 2024-10-23 22:13:30

asal

694 orang telah melayarinya

How to Extract CSS Properties Dynamically Using JavaScript?

Mengekstrak Sifat CSS Menggunakan JavaScript

Menavigasi lembaran gaya yang dilampirkan pada dokumen HTML boleh memberikan cerapan berharga tentang pembentangan elemen halaman. Khususnya, keupayaan untuk membaca sifat CSS tertentu boleh membantu dalam manipulasi gaya dinamik.

Satu pendekatan melibatkan pemeriksaan secara manual objek document.styleSheets dan menghuraikan peraturan gaya. Walau bagaimanapun, kaedah ini memerlukan tenaga kerja dan boleh menjadi sukar digunakan, terutamanya apabila menyasarkan pemilih tertentu.

Teknik yang lebih langsung ialah mencipta elemen sementara yang sepadan dengan pemilih yang diingini. Menggunakan kaedah getComputedStyle() (untuk penyemak imbas moden) atau currentStyle (untuk Internet Explorer), anda boleh mendapatkan semula nilai pengiraan mana-mana sifat CSS untuk elemen yang dicipta.

Sebagai contoh, pertimbangkan kod berikut untuk mendapatkan semula sifat warna bagi

dengan "susun atur" kelas:

<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
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create div
  d.className = "layout"; // Set class = "layout"
  alert(getStyleProp(d, "color")); // Get property value
};</code>

Salin selepas log masuk

Sebagai alternatif, jika anda ingin menentukan sifat CSS yang diwarisi daripada lembaran gaya tanpa mengambil kira sebarang gaya sebaris, fungsi berikut boleh digunakan:

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

Salin selepas log masuk

Dengan memanfaatkan teknik ini, pembangun boleh melaraskan sifat CSS elemen secara dinamik, memanipulasi pembentangan mereka dan memperoleh pemahaman yang lebih mendalam tentang penggayaan halaman.

Atas ialah kandungan terperinci Bagaimana untuk mengekstrak sifat CSS secara dinamik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!