Bolehkah Anda Mengubah Gaya Unsur Pseudo CSS dengan JavaScript?

Mengubah suai Gaya Elemen Pseudo CSS Menggunakan JavaScript

Adakah boleh untuk mengubah penggayaan elemen pseudo CSS melalui JavaScript?

Pertimbangkan contoh menetapkan warna bar skrol secara dinamik menggunakan kod ini:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

Walau bagaimanapun, penyemak imbas bertindak balas dengan ralat berikut: "Uncaught TypeError: Tidak boleh membaca 'gaya' sifat nol."

Bolehkah tugas ini dicapai dengan cara yang berbeza?

Dalam penyemak imbas webkit, anda boleh mencapainya dengan menggunakan CSS Vars.

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

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: #ccc;
  background-color: var(--scrollbar-background);
}

Untuk memanipulasi nilai ini dalam JavaScript:

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

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

Atas ialah kandungan terperinci Bolehkah Anda Mengubah Gaya Unsur Pseudo CSS dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!