Bagaimanakah Anda Boleh Memanipulasi Elemen Pseudo CSS Secara Dinamik dengan JavaScript?

Memanipulasi Elemen Pseudo CSS dengan JavaScript

Mengubah gaya elemen pseudo CSS secara dinamik menggunakan JavaScript boleh dicapai dengan menggunakan pelbagai teknik, termasuk CSS pembolehubah dan sifat khusus vendor.

Pembolehubah CSS

Untuk penyemak imbas webkit, penyelesaian mudah dan serasi silang-pelayar untuk memanipulasi elemen pseudo ialah pembolehubah CSS. Pembolehubah ini membolehkan anda menentukan gaya dalam CSS dan mengakses serta mengubahnya dalam JavaScript. Untuk menggunakan kaedah ini:

• Tentukan pembolehubah CSS dalam helaian gaya, seperti:

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

• Dalam gaya elemen pseudo, rujuk ini pembolehubah menggunakan var(--scrollbar-background). Contohnya:

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

• Untuk menukar gaya elemen pseudo secara dinamik, ubah suai nilai pembolehubah CSS dalam JavaScript:

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

Sifat Khusus Vendor

Untuk menyasarkan terus elemen pseudo khusus vendor, seperti bar skrol WebKit, anda boleh menggunakan awalan vendor yang sepadan dalam JavaScript. Sebagai contoh, kod berikut menetapkan warna latar belakang ibu jari bar skrol:

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

Untuk menyembunyikan bar skrol, gunakan sifat khusus vendor -webkit-overflow-scrolling:

document.querySelector("#editor::-webkit-scrollbar").style.webkitOverflowScrolling = "hidden";

Nota: Sokongan penyemak imbas untuk sifat khusus vendor ini mungkin berbeza-beza. Adalah disyorkan untuk menyemak matriks keserasian sebelum menggunakan teknik ini dalam kod pengeluaran.

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