Bagaimana untuk Mengubah Suai Gaya Unsur Pseudo CSS dengan JavaScript Tanpa "Uncaught TypeError: Tidak dapat membaca 'gaya' sifat nol"?

Mengubah suai Gaya Unsur Pseudo CSS dengan JavaScript

Semasa cuba melaraskan warna dan keterlihatan bar skrol menggunakan JavaScript, perkara biasa ditemui ralat "Uncaught TypeError: Tidak dapat membaca 'gaya' sifat null". Ini berlaku kerana tapak web telah melumpuhkan penatalan secara lalai, menyebabkan elemen bar skrol tidak wujud.

Untuk mengatasi pengehadan ini, anda boleh menggunakan teknik CSS Vars. Kaedah ini melibatkan penentuan nilai sandaran dalam CSS anda dan memanipulasinya secara dinamik menggunakan pembolehubah CSS dalam JavaScript.

Dalam CSS anda, tentukan gaya bar skrol dengan nilai sandaran seperti berikut:

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

Kemudian, dalam JavaScript anda, ubah suai pembolehubah yang mengawal warna latar belakang bar skrol:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

Pendekatan ini membenarkan untuk pengubahsuaian dinamik gaya bar skrol tanpa menemui ralat "null". Perlu diingat bahawa teknik ini mungkin tidak disokong dalam semua penyemak imbas, jadi pertimbangkan kemerosotan yang anggun untuk penyemak imbas yang lebih lama.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Gaya Unsur Pseudo CSS dengan JavaScript Tanpa "Uncaught TypeError: Tidak dapat membaca 'gaya' sifat nol"?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!