jquery如何改變div的class屬性

發(fā)布時(shí)間：2022-03-18 13:34:04 來源：億速云閱讀：362 作者：iii 欄目：web開發(fā)

這篇“jquery如何改變div的class屬性”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jquery如何改變div的class屬性”文章吧。

改變方法：1、使用“$("div").addClass("class屬性值")”語句；2、使用“$("div").attr("class","值")”語句；3、使用“$("div").removeClass("class屬性值")”語句。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery改變div的class屬性

方法1：使用addClass() 方法

addClass() 方法向被選元素添加一個(gè)或多個(gè)類。

該方法不會(huì)移除已存在的 class 屬性，僅僅添加一個(gè)或多個(gè) class 屬性。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").addClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<h2>這是一個(gè)h2大標(biāo)題</h2>
		<div>這是一個(gè)div段落</div>
		<p>這是一個(gè)p段落</p>
		<button>向div元素添加一個(gè)類</button>
	</body>
</html>

jquery如何改變div的class屬性

方法2：使用attr() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").attr("class","intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: pink;
			}
		</style>
	</head>

	<body>
		<h2>這是一個(gè)h2大標(biāo)題</h2>
		<div>這是一個(gè)div段落</div>
		<p>這是一個(gè)p段落</p>
		<button>向div元素添加一個(gè)類</button>
	</body>
</html>

jquery如何改變div的class屬性

方法3：使用removeClass() 方法

removeClass() 方法從被選元素移除一個(gè)或多個(gè)類。

注釋：如果沒有規(guī)定參數(shù)，則該方法將從被選元素中刪除所有類。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").removeClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: pink;
			}
		</style>
	</head>

	<body>
		<h2>這是一個(gè)h2大標(biāo)題</h2>
		<div class="intro">這是一個(gè)div段落</div>
		<p>這是一個(gè)p段落</p>
		<button>去除div 元素的類</button>
	</body>
</html>

jquery如何改變div的class屬性

以上就是關(guān)于“jquery如何改變div的class屬性”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jquery如何改變div的class屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽