How to change classname in jquery-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to change classname in jquery

Sep 27, 2022 pm 06:36 PM

jquery

3 modification methods: 1. Use attr() to modify the value of the class attribute, the syntax is "element object.attr("class","new class name");". 2. Use prop() to modify the value of the class attribute, the syntax is "element object.prop("class","new class name");". 3. Use removeClass() and addClass(), the syntax is "element object.removeClass("old class name").addClass("new class name");".

How to change classname in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

jquery method to change classname (class name)

Method 1: Use attr() to modify

attr() can set the attributes and values of elements

You only need to modify the value of the class attribute, syntax:

$(selector).attr("class","新类名");

Copy after login

Example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").attr("class", "box2");
				});
			});
		</script>
		<style>
			.box1 {
				height: 150px;
				background-color: #AFEEEE;
			}

			.box2 {
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>

		<div class="box1"></div>
		<br>
		<button>改变classname（类名）</button>
	</body>
</html>

Copy after login

How to change classname in jquery

Method 2: Use prop() to modify

attr() can set the attributes and values of the element

You only need to modify the class attribute Just change the value and modify the syntax:

$(selector).prop("属性名","新类名");

Copy after login

Example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").prop("class","box1");
				});
			});
		</script>
		<style>
			.box1 {
				height: 150px;
				background-color: #AFEEEE;
			}

			.box2 {
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>

		<div class="box2"></div>
		<br>
		<button>改变classname（类名）</button>
	</body>
</html>

Copy after login

How to change classname in jquery

##Method 3: Modify using removeClass() and addClass()

Use removeClass() to delete the old class
Use addClass() to add a new class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function(){
				    $("p").removeClass("intro1").addClass("intro2");
				  });
			});
		</script>
		<style>
			.intro1 {
				font-size: 120%;
				color: red;
			}
			.intro2 {
				color: peru;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<p class="intro1">测试段落</p>
		<button>改变classname（类名）</button>
	</body>
</html>

Copy after login

How to change classname in jquery

jQuery tutorial, web front-end video】

The above is the detailed content of How to change classname in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn