Bagaimanakah Saya Boleh Mengubah Gaya Unsur Pseudo CSS Secara Dinamik Menggunakan JavaScript?

Memanipulasi Gaya Unsur Pseudo CSS Secara Dinamik Melalui JavaScript

Semasa cuba mengubah gaya unsur pseudo CSS secara dinamik melalui JavaScript, pengguna mungkin menghadapi "Uncaught TypeError: Tidak dapat membaca 'gaya' sifat nol" ralat. Artikel ini meneroka pendekatan alternatif yang memanfaatkan pembolehubah CSS untuk mencapai keserasian merentas pelayar dalam penyemak imbas WebKit secara khusus.

Pendekatan Berasaskan Pembolehubah CSS

Dalam CSS, tentukan pembolehubah CSS untuk warna latar belakang bar skrol:

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

Kemudian, gunakan pembolehubah pada bar skrol pseudo-element:

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

Manipulasi JavaScript

Dalam JavaScript, tetapkan pembolehubah CSS pada elemen #editor:

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

Ini kaedah membenarkan manipulasi dinamik warna latar belakang bar skrol, walaupun dalam penyemak imbas lama yang tidak menyokong ciri CSS moden.

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