Bolehkah JavaScript Mengubah Suai Gaya Unsur Pseudo CSS Secara Dinamik?

Mengubah suai Gaya Unsur Pseudo CSS dengan JavaScript: Pandangan Lebih Dekat

Adakah mungkin untuk mengubah gaya unsur pseudo CSS secara dinamik melalui JavaScript? Katakan kita ingin menetapkan warna bar skrol dan menyembunyikannya sama sekali. Menggunakan skrip seperti berikut, walau bagaimanapun, mengembalikan ralat "Tidak boleh membaca 'gaya' sifat nol":

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

Mari kita teroka pendekatan alternatif yang berfungsi dengan berkesan dalam penyemak imbas Webkit dan membenarkan kemerosotan yang anggun pada orang lain.

Menggunakan CSS Var untuk Penggayaan

Pelayar moden menawarkan Pembolehubah CSS (CSS Vars), yang menyediakan cara yang berkesan untuk mentakrif dan memanipulasi sifat CSS tersuai daripada JavaScript. Dengan menggunakan CSS Vars, anda boleh mencapai kesan penggayaan yang diingini sambil mengekalkan keserasian merentas penyemak imbas.

Dalam CSS anda, tentukan CSS Var --scrollbar-background dan gunakannya pada ibu jari bar skrol:

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

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

Sekarang, dalam JavaScript anda, ubah suai sifat --scrollbar-background pada #editor elemen:

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

Dengan menggunakan CSS Vars bersama-sama JavaScript, anda boleh menukar gaya elemen pseudo dengan mudah dan memastikan keserasian merentas pelbagai pelayar web.

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