Bagaimanakah Saya Boleh Menggayakan Elemen Pseudo CSS Secara Dinamik dalam WebKit Menggunakan JavaScript?

Penggayaan Unsur Pseudo CSS Dinamik melalui JavaScript dalam WebKit

Mengubah suai gaya elemen pseudo CSS secara dinamik melalui JavaScript telah menjadi cabaran biasa untuk pemaju. Dalam penyemak imbas webkit khususnya, percubaan untuk memanipulasi sifat seperti latar belakang dan keterlihatan sering mengembalikan ralat nol.

Satu penyelesaian melibatkan penggunaan Pembolehubah CSS, yang menyediakan pendekatan yang lebih moden dan serba boleh. Dengan mentakrifkan pembolehubah dalam CSS anda, anda kemudiannya boleh memanipulasi nilainya dalam JavaScript dan menerapkannya pada elemen pseudo anda.

Dalam CSS anda, isytiharkan pembolehubah CSS seperti itu:

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

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

Kemudian, dalam JavaScript anda, laraskan pembolehubah --scrollbar-background pada elemen #editor untuk menukar bar skrol secara dinamik penampilan:

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

Kaedah ini berkesan menangani had manipulasi gaya langsung untuk elemen pseudo dalam penyemak imbas webkit, sambil turut menyediakan kesalingoperasian yang lancar dengan penyemak imbas lama yang tidak menyokong Pembolehubah CSS.

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