jquery sets class style of element-JS Tutorial-php.cn

jquery sets class style of element

无忌哥哥

Release： 2018-06-29 13:48:11

Original

1663 people have browsed it

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()

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Copy after login

2. Remove class style: removeClass()

$(&#39;#pic&#39;).removeClass(&#39;circle&#39;)
$(&#39;#pic&#39;).removeClass(&#39;shadow&#39;)
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)

Copy after login

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

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Copy after login

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

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Copy after login

Now the removal operation is performed

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Copy after login

4. Query class style: hasClass()

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

Copy after login

//Console view results

console.log(res)

Copy after login

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!