jquery sets class style of element

jquery sets the class style of elements

Methods to set element styles

1. Specify the class style rules to be applied by setting the class attribute of the tag

2 .Directly set the style attribute of the tag to reset the style of the current element

1. Apply class style: addClass()

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')

2. Remove class style: removeClass()

$('#pic').removeClass('circle')
$('#pic').removeClass('shadow')
$('#pic').removeClass('circle shadow')

3. Automatic style switching: toogleClass()

If no class style is added to the current element, then the class style specified by it will be automatically added

$('#pic').toggleClass('circle shadow')

If the current element has been added If the upper class style is used, it will remove this class style

First add the upper class style to the element

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')

Now the removal operation is performed

$('#pic').toggleClass('circle shadow')

4. Query class style: hasClass()

var res = $('#pic').hasClass('circle shadow') //false
$('#pic').addClass('circle shadow') 
var res = $('#pic').hasClass('circle shadow') //true
if ($('#pic').hasClass('circle shadow')) {
$('#pic').removeClass('circle shadow')
} else {
$('#pic').addClass('circle shadow') 
}

//Console view results

console.log(res)

The above is the detailed content of jquery sets class style of element. For more information, please follow other related articles on the PHP Chinese website!