Mengapakah `this.style[property]` Mengembalikan Rentetan Kosong dalam JavaScript?

JavaScript this.style[property] Mengembalikan Rentetan Kosong: Penjelasan

Sementara this.style[property] terutamanya mendapatkan semula gaya sebaris yang digunakan terus ke elemen, terdapat keadaan di mana rentetan kosong diperolehi. Ini berlaku apabila sifat yang dipersoalkan tidak ditetapkan secara eksplisit dalam gaya sebaris elemen.

Dalam coretan kod yang disediakan:

function css(prop, value) {
  if (value == null) {
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

Apabila memanggil element.css("height"), anda sedang cuba untuk mengakses sifat ketinggian sebaris. Walau bagaimanapun, dalam HTML yang disediakan:

<div>
<p>Tiada sifat ketinggian sebaris ditentukan. Oleh itu, this.style["height"] mengembalikan rentetan kosong.</p>
<p>Untuk mendapatkan semula ketinggian yang dikira, yang termasuk gaya lata daripada helaian gaya luaran atau sebaris, anda boleh menggunakan kaedah getComputedStyle():</p>
<pre class="brush:php;toolbar:false">const element = document.getElementById("test");
const style = getComputedStyle(element);
const height = style.height;

Dalam kes ini, ketinggian akan sama dengan "100px".

Untuk menyelesaikan isu dalam kod awal, anda boleh mengubah suai fungsi css seperti berikut:

function css(prop, value) {
  if (value == null) {
    const b = (window.navigator.userAgent).toLowerCase();
    let s;
    if (/msie|opera/.test(b)) {
      s = this.currentStyle;
    } else if (/gecko/.test(b)) {
      s = document.defaultView.getComputedStyle(this, null);
    }
    if (s[prop] != undefined) {
      return s[prop];
    }
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

Dengan pengubahsuaian ini, element.css("height") akan mengembalikan "100px" kerana fungsi itu kini turut menyemak gaya yang dikira.