jQuery - Kry en stel CSS-klasse in
Met jQuery is dit maklik om die styl van elemente te manipuleer.
jQuery Manipuleer CSS
jQuery het verskeie metodes vir CSS-manipulasie. Ons sal na die volgende metodes kyk:
addClass()- Voeg een of meer klasse by die geselekteerde elementeremoveClass()- Verwyder een of meer klasse van die geselekteerde elementetoggleClass()- Wissel tussen die byvoeging/verwydering van klasse van die geselekteerde elementecss()- Stel of gee die stylkenmerk terug
Voorbeeld Stylesheet
Die volgende stylblad sal vir al die voorbeelde op hierdie bladsy gebruik word:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() Metode
Die volgende voorbeeld wys hoe om klaskenmerke by verskillende elemente te voeg. Natuurlik kan u verskeie elemente kies wanneer u klasse byvoeg:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
U kan ook verskeie klasse binne die addClass()metode spesifiseer:
Voorbeeld
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() Metode
Die volgende voorbeeld wys hoe om 'n spesifieke klaskenmerk van verskillende elemente te verwyder:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() Metode
Die volgende voorbeeld sal wys hoe om die jQuery toggleClass()-metode te gebruik. Hierdie metode wissel tussen die byvoeging/verwydering van klasse van die geselekteerde elemente:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Metode
Die jQuery css()-metode sal in die volgende hoofstuk verduidelik word.
jQuery Oefeninge
jQuery CSS-verwysing
Vir 'n volledige oorsig van alle jQuery CSS-metodes, gaan asseblief na ons jQuery HTML/CSS-verwysing .