資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中使用 jQuery 操縱 CSS 類？
在本文中，我們將學習如何在 HTML 中使用 jQuery 來操縱 CSS 類。
使用 jQuery，可以輕鬆地操縱 HTML 元素的樣式。我們有幾個用於操縱 CSS 的 jQuery 方法。讓我們逐一討論它們，並提供適當的示例。
jQuery addClass() 方法
jQuery addClass() 方法用於向所選元素新增一個或多個類。
語法
以下為 jQuery addClass() 方法的語法 −
$(selector).addClass(classname);
“classname” 是必需的引數。它指定要新增的一個或多個類名。
示例
在以下示例中，我們使用 jQuery addClass() 方法向 HTML 元素新增 class 屬性 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3").addClass("newclass1");
$("p").addClass("newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
}
.newclass2 {
font-weight: bold;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
輸出
在執行上述程式後，單擊按鈕時，標題和段落元素的樣式會根據 CSS 中指定的屬性進行操縱。
示例
在這裡，我們透過用空格分隔類名在 jQuery addClass() 方法中指定多個類。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").addClass("newclass1 newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
輸出
執行上述程式並單擊按鈕檢視更改。
jQuery removeClass() 方法
jQuery removeClass() 方法從選中的元素中移除一個或多個類。如果我們未為此方法指定任何引數，它將從選定的元素中移除所有類名。
語法
以下是 jQuery removeClass() 方法的語法 −
$(selector).removeClass(classname);
“classname”是必需的引數。它指定一個或多個要移除的類名。
示例
在以下示例中，我們正在從標題和段落元素中移除類屬性 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").removeClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to remove classes from elements</button>
</body>
</html>
輸出
執行上述程式並單擊按鈕檢視更改。
jQuery toggleClass() 方法
jQuery toggleClass() 方法在向選中的元素中新增和移除類之間切換。
語法
以下是 jQuery toggleClass() 方法的語法 −
$(selector).toggleClass(classname);
示例
在下面的示例中，我們正在嘗試使用 jQuery toggleClass() 方法在向選中的元素中新增/移除類之間切換 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").toggleClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to toggle classes</button>
</body>
</html>
輸出
執行上述程式並單擊按鈕檢視切換。
更新於： 2023 年 08 月 04 日
94 次瀏覽
廣告