Bagaimanakah Saya Boleh Mendapatkan Nilai Harta CSS Tepat (Termasuk Unit) Elemen dalam JavaScript?

Dapatkan Nilai Harta CSS Elemen sebagai Set (Peratus/Em/Px)

Mendapatkan nilai sifat CSS bagi elemen seperti yang dinyatakan dalam peraturan gaya boleh mencabar, terutamanya apabila harta itu telah ditetapkan dalam pelbagai unit. Dalam Google Chrome, kaedah getComputedStyle() dan kaedah css() jQuery kedua-duanya mengembalikan nilai semasa dalam piksel.

Penyelesaian: Fungsi getMatchedStyle

Untuk menangani isu ini, fungsi JavaScript yang dipanggil getMatchedStyle() telah dibangunkan. Ia mengambil elemen dan sifat sebagai hujah dan mengembalikan nilai seperti yang ditetapkan dalam peraturan CSS.

function getMatchedStyle(elem, property) {
  // Check element's own style first
  var val = elem.style.getPropertyValue(property);
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules
  var rules = getMatchedCSSRules(elem);

  // Iterate rules in reverse order of priority
  for (var i = rules.length; i--;) {
    var r = rules[i];
    var important = r.style.getPropertyPriority(property);

    // Reset value if important or not yet set
    if (val == null || important) {
      val = r.style.getPropertyValue(property);
      if (important) break;
    }
  }

  return val;
}

Contoh

Pertimbangkan kod HTML berikut dengan Peraturan CSS:

<div class="b">div 1</div>
<div>
<p>Kod JavaScript berikut menggunakan getMatchedStyle() untuk mendapatkan nilai lebar bagi div:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p><strong>Keputusan:</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em