Bagaimanakah Saya Boleh Menggayakan Elemen Pseudo CSS Secara Dinamik dengan JavaScript?

Memanipulasi Gaya Unsur Pseudo CSS dengan JavaScript

Menukar gaya unsur pseudo CSS, seperti bar skrol, semata-mata melalui JavaScript boleh mencabar. Walaupun kaedah seperti mengakses terus sifat gaya elemen pseudo mungkin tidak berfungsi seperti yang diharapkan, terdapat pendekatan alternatif yang boleh anda pertimbangkan.

Satu penyelesaian yang berkesan ialah menggunakan pembolehubah CSS, yang menyediakan cara yang lancar untuk mengubah suai pseudo -gaya elemen daripada JavaScript. Dengan memperkenalkan pembolehubah CSS dalam kod CSS anda, anda boleh menentukan nilai sandaran dan kemudian mengemas kini secara dinamik dalam kod JavaScript anda.

Sebagai contoh, untuk menukar warna bar skrol, anda boleh mentakrifkan CSS berikut:

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

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

Dalam JavaScript anda, anda kemudian boleh memanipulasi pembolehubah CSS menggunakan setProperty() kaedah:

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

Pendekatan ini menyediakan sokongan untuk kebanyakan penyemak imbas moden, termasuk Chrome, Firefox dan Safari. Ia membolehkan anda mengemas kini gaya elemen pseudo secara dinamik, membolehkan anda melaksanakan penyesuaian bar skrol tersuai dan kesan lain yang diingini.

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