Bagaimanakah Saya Boleh Mengakses dan Mengubahsuai Sifat Gaya CSS Pseudo-elements (::before, ::after) Menggunakan jQuery?

Mengakses Sifat Gaya Elemen Pseudo dalam jQuery

Artikel ini membincangkan isu mengakses sifat gaya unsur pseudo, seperti ::sebelum dan ::selepas, menggunakan jQuery.

Dalam CSS, pseudo-elemen digunakan untuk mengubah suai rupa elemen, tetapi ia tidak boleh disasarkan secara langsung dengan pemilih jQuery. Secara semula jadi, unsur pseudo memasukkan kandungan sebelum atau selepas elemen sasaran dan tidak boleh digayakan secara individu.

Sebagai contoh, jika anda mempunyai peraturan CSS berikut:

.example::before {
  content: "Added Text";
}

Cuba untuk memilih pseudo-element menggunakan jQuery, seperti ini:

$(".example::before").css("color", "red");

tidak akan berfungsi. Sebaliknya, anda perlu menyasarkan elemen induk dan menggunakan pemilih :has() untuk memilih elemen yang mempunyai elemen pseudo tertentu:

$(".example:has(::before)").css("color", "red");

Sebagai alternatif, anda boleh menggunakan pemalam jQuery.cssRules() untuk akses dan ubah suai peraturan CSS secara langsung:

var rules = jQuery.cssRules();
for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText === ".example::before") {
    rules[i].style.color = "red";
  }
}

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pendekatan ini dihadkan oleh sokongan penyemak imbas dan isu keserasian.

Ringkasnya, walaupun tidak mungkin untuk memilih unsur pseudo secara langsung dengan pemilih jQuery, terdapat kaedah alternatif yang boleh digunakan untuk mengakses dan mengubah suai sifat gayanya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses dan Mengubahsuai Sifat Gaya CSS Pseudo-elements (::before, ::after) Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!