Mengapakah `this.style[property]` Kadang-kadang Mengembalikan Rentetan Kosong Apabila Mendapatkan Sifat CSS dalam JavaScript?

Mendapatkan Sifat Gaya daripada JavaScript

Apabila berurusan dengan gaya CSS dalam JavaScript, terdapat situasi di mana this.style[property] mungkin mengembalikan rentetan kosong.

Pemahaman this.style[property]

this.style[property] mengakses gaya sebaris elemen semasa. Gaya sebaris ialah gaya yang ditakrifkan secara langsung dalam teg atau dalam elemen HTML itu sendiri.

Senario Contoh

Pertimbangkan kod berikut:

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

Fungsi ini membolehkan anda mendapatkan atau menetapkan Sifat CSS pada elemen menggunakan element.css(property, value).

Walau bagaimanapun, jika anda cuba dapatkan semula sifat yang tidak ditetapkan sebaris, seperti ketinggian dalam contoh berikut:

<div>
<pre class="brush:php;toolbar:false">const element = document.getElementById('test');
const height = element.css('height'); // Returns ""

Dalam kes ini, ketinggian akan mengembalikan rentetan kosong kerana ia tidak ditakrifkan sebagai gaya sebaris.

Penyelesaian

Untuk mengakses sifat CSS yang ditakrifkan dalam lembaran gaya luaran atau menggunakan kelas, anda boleh menggunakan fungsi getComputedStyle(). Fungsi ini mendapatkan semula gaya yang dikira bagi elemen, yang merangkumi semua gaya yang digunakan padanya:

const element = document.getElementById('test');
const height = getComputedStyle(element).height; // Returns "100px"

Dalam kod kemas kini yang anda berikan, anda telah membetulkan fungsi css dengan menggunakan getComputedStyle() untuk mendapatkan semula gaya yang dikira daripada elemen:

function css(prop, value) {
  // Code to get or set CSS properties
  if (value == null) {
    var b = (window.navigator.userAgent).toLowerCase();
    var 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];
  }
  // Code to continue with your logic
}

Dengan menggunakan fungsi yang dikemas kini ini, anda kini boleh mendapatkan semula sifat CSS dengan betul yang ditakrifkan dalam helaian gaya luaran atau menggunakan kelas, walaupun ia tidak ditetapkan sebagai gaya sebaris.