Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS Ditakrifkan Pada Mulanya (Termasuk Peratusan dan Unit EM)?

Dapatkan Nilai Harta CSS seperti Ditakrifkan Pada Mulanya (Peratus/EM/PX)

Dalam pembangunan web, adalah penting untuk mendapatkan semula yang asal Nilai sifat CSS sesuatu elemen, tanpa mengira sebarang pengubahsuaian berikutnya. Ini benar terutamanya apabila bekerja dengan unit seperti peratus atau em, kerana nilai yang dikira sering memberikan nilai px sebaliknya.

Definisi Masalah

Masalah timbul apabila menggunakan fungsi seperti getComputedStyle atau css() jQuery untuk mendapatkan nilai sifat CSS semasa. Kaedah ini mengembalikan nilai dalam piksel, walaupun pada mulanya ditetapkan dalam unit lain.

Penyelesaian: getMatchedStyle

Untuk menangani isu ini, fungsi JavaScript tersuai yang dipanggil getMatchedStyle boleh bekerja. Fungsi ini berulang melalui peraturan CSS elemen, mengutamakan gaya elemen dan peraturan penting. Ia kemudian mengembalikan nilai awal seperti yang ditakrifkan dalam peraturan CSS.

Contoh Kod

function getMatchedStyle(elem, property) {
  // Check for element-defined property (highest priority)
  var val = elem.style.getPropertyValue(property);

  // If important, return immediately
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules in descending priority order
  var rules = getMatchedCSSRules(elem);

  // Iterate through rules backwards to ensure correct priority
  for (var i = rules.length; i--;) {
    var r = rules[i];

    // Check if rule is important
    var important = r.style.getPropertyPriority(property);

    // Update value only if not set or if important rule encountered
    if (val == null || important) {
      val = r.style.getPropertyValue(property);

      // Return if important rule encountered
      if (important) break;
    }
  }

  return val;
}

Contoh Penggunaan

Pertimbangkan HTML dan CSS berikut:

<div class="b">first</div>
<div>

Kod JavaScript berikut boleh digunakan untuk mendapatkan semula lebar awal div:

var d = document.querySelectorAll('div');

for (var i = 0; i < d.length; ++i) {
  console.log("div " + (i + 1) + ":  " + getMatchedStyle(d[i], 'width'));
}

Output

div 1:  100px
div 2:  50%

Dengan menggunakan fungsi getMatchedStyle, kami boleh mendapatkan semula nilai sifat CSS dengan tepat seperti yang ditakrifkan pada asalnya, tanpa mengira sama ada ia telah diubah suai oleh gaya seterusnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS Ditakrifkan Pada Mulanya (Termasuk Peratusan dan Unit EM)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!