How jquery replaces class styles

This article mainly introduces how to replace the class style of jquery, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Replacement method: 1, use the removeClass () method to remove the old class style, addClass () method to add a new class style; 2, use the attr () method to modify the class attribute, directly replace with the new class class, syntax "$(element). Attr (" class "," new class name ")".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery replacement class style

Method 1: use the removeClass () and addClass () methods

Use the removeClass () method to remove the old class style and use the addClass () method to add a new class style

$(document) .ready (function () {$("button") .click (function () {$("p"). RemoveClass ("old-class"). AddClass ("new-class");}) . old-class {border: 1px solid red; background-color: # FFC0CB;}. New-class {border: 2px solid green Background-color: # 55aa7f; color: white;} hello, test text

Replace class style

Method 2: use attr ()

Use the attr () method to modify the class property and directly replace it with the new class class

$(document) .ready (function () {$("button") .click (function () {$("p"). Attr ("class", "new-class");}) . old-class {border: 1px solid red; background-color: # FFC0CB;}. New-class {border: 2px solid green Background-color: # 55aa7f; color: white;} hello, test text

Replace class style

Thank you for reading this article carefully. I hope the article "how to replace the class style of jquery" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!