Home > Article > Web Front-end > How to replace all class names in jquery
How to replace all class names in jquery
- WBOYOriginal
- 2021-12-13 17:27:153254browse
Method: 1. Use the removeClass() method to delete all class names of the element. The syntax is "element object.removeClass();"; 2. Use the addClass() method to add the class name you want to replace. Yes, the syntax is "element object.addClasss("new class name");".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to replace all class names in jquery
In jquery we can delete all class names of elements through the removeClass() method , and then use the addClass() method to add the class name you want to replace.
removeClass() method removes one or more classes from the selected element.
Note: If no parameters are specified, this method will remove all classes from the selected elements.
addClass() method adds one or more classes to the selected element.
This method does not remove the existing class attribute, but only adds one or more class attributes.
Tip: If you need to add multiple classes, please use spaces to separate class names.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".anniu1").click(function(){
$("p").removeClass();
});
$(".anniu2").click(function(){
$("p").addClass("intro2");
});
});
</script>
<style type="text/css">
.intro1{
font-size:120%;
color:red;
}
.intro2{
font-size:200%;
color:pink;
}
</style>
</head>
<body>
<p class="intro1">This is a paragraph.</p>
<button class="anniu1">删除类</button>
<button class="anniu2">增加类</button>
</body>
</html>Output result:
Related video tutorial recommendation: jQuery video tutorial
The above is the detailed content of How to replace all class names in jquery. For more information, please follow other related articles on the PHP Chinese website!