By dynamically changing the class name (class), you can modify the elements to show different effects. In the HTML structure, multiple classes are separated by spaces. When a node (or a label) contains multiple classes, the className attribute of the DOM element response does not obtain an array of class names, but a string containing spaces. , which makes multi-class operations very troublesome. The same jQuery developer also considered this situation and added an .addClass() method for dynamically adding class names
addClass( className ) method
Look at the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
div{
width:200px;
height:200px;
}
.bg{
background:red;
}
</style>
</head>
<body>
<div id="div">php 中文网</div>
<script type="text/javascript">
$("#div").addClass('bg');
</script>
</body>
</html>
removeClass() Remove style
The following case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
.div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div class="div">php 中文网</div>
<script type="text/javascript">
$(".div").removeClass("div");
</script>
</body>
</html>The above code, so that the style of our div is deleted
Next Section