Rumah >hujung hadapan web >tutorial js >Cara jQuery mengubah suai CSS pseudo-element attributes_jquery

Cara jQuery mengubah suai CSS pseudo-element attributes_jquery

WBOY
WBOYasal
2016-05-16 16:40:451484semak imbas

Unsur pseudo CSS (unsur pseudo) bukan elemen DOM, jadi anda tidak boleh memilihnya secara langsung.

Andaikan terdapat kod HTML berikut:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

dan kod CSS:

.techbrood:before {
width: 0;
}

Sekarang anda mahu menetapkan atribut lebar techbrood:sebelum secara dinamik kepada 100% dalam peristiwa klik elemen,

Terdapat dua kaedah, satu ialah menambah gaya baharu:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(Perhatikan bahawa kaedah ini akan menjejaskan semua elemen dengan techbrood kelas)

Kaedah lain ialah menambah kelas baharu pada elemen dan tetapkan atribut kelas baharu untuk mencapai kesan menukar atribut elemen pseudo:

.techbrood.change:before{
width: 100%;
}

Kod jQuery:

$('#td_pseudo').addClass("change");
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn