Bagaimana untuk Menggayakan Elemen Pseudo CSS Secara Dinamik dengan JavaScript?

Penggayaan Unsur Pseudo CSS Dinamik dengan JavaScript

Adakah ia boleh mengubah suai gaya elemen pseudo CSS menggunakan JavaScript? Contohnya, melaraskan warna bar skrol secara dinamik atau menyembunyikannya. Walau bagaimanapun, percubaan untuk berbuat demikian dengan skrip ini telah menghasilkan "TypeError: Tidak boleh membaca 'gaya' sifat nol."

PENYELESAIAN: Memperkenalkan Pembolehubah CSS

Semasa kesalingkendalian silang pelayar mungkin tidak menjadi keutamaan, menggunakan pembolehubah CSS (CSS Vars) menawarkan penyelesaian yang berkesan dalam pelayar WebKit. Kaedah ini membolehkan anda mengisytiharkan pembolehubah dalam CSS dan mengubah suainya secara dinamik menggunakan JavaScript.

Dalam CSS anda, tentukan warna latar belakang bar skrol sebagai pembolehubah:

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

Kemudian, gayakan ibu jari bar skrol menggunakan pembolehubah:

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

Dalam JavaScript, anda boleh menukar nilai pembolehubah pada #editor elemen:

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

Pendekatan ini membolehkan anda mengubah suai warna bar skrol secara dinamik tanpa mengakses terus gaya elemen pseudo, dengan itu mengelakkan isu "TypeError".

Untuk contoh lanjut, rujuk sumber ini pada manipulasi pembolehubah CSS dengan JavaScript: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Pseudo CSS Secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!