Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery

青灯夜游

Lepaskan： 2022-05-30 14:32:28

asal

1728 orang telah melayarinya

Dua kaedah pengubahsuaian: 1. Gunakan attr() untuk mengubah suai nilai atribut kelas, sintaksnya ialah "dom element object.attr("class","nama kelas baharu""; mengalih keluar kelas lama Untuk menambah kelas baharu, sintaks ialah "objek elemen dom.removeClass("nama kelas lama").addClass("nama kelas baharu").

Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Cara jquery mengubah suai nama kelas elemen dom

Kaedah 1: Gunakan secara langsung attr() untuk mengubah suai nilai atribut kelas

kaedah attr() boleh menetapkan nilai atribut bagi elemen yang dipilih.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
				  $("p:first").attr("class","intro2");
				});
			});
			</script>
		<style type="text/css">
			.intro1 {
				font-size: 120%;
				color: red;
			}
			.intro2 {
				font-size: 120%;
				color: green;
			}
		</style>
	</head>
	<body>

		<h1>这是一个段落标题</h1>
		<p class="intro1">这是一个段落</p>
		<p> 这是另外一个段落</p>
		<button>修改p元素的 "intro1" 类</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery

Kaedah 2: Gunakan removeClass() dan addClass()

Guna removeClass dahulu () Alih keluar kelas yang ditentukan
dan kemudian gunakan addClass() untuk menambah kelas baharu

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
				  $("p:first").removeClass("intro1").addClass("intro2");
				});
			});
			</script>
		<style type="text/css">
			.intro1 {
				font-size: 120%;
				color: red;
			}
			.intro2 {
				font-size: 120%;
				color: green;
			}
		</style>
	</head>
	<body>

		<h1>这是一个段落标题</h1>
		<p class="intro1">这是一个段落</p>
		<p> 这是另外一个段落</p>
		<button>修改p元素的 "intro1" 类</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai nama kelas elemen dom dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!