資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 jQuery 中，有哪些方法可以用來設定選中元素的樣式？
開發者可以使用 JavaScript 或 jQuery 來操作 HTML 元素的樣式。為此，開發者首先需要使用 jQuery 訪問 HTML 元素，然後使用各種方法來設定選中 HTML 元素的樣式。
有時，我們需要使用 jQuery 來管理元素的樣式。例如，當用戶點選按鈕時，我們需要更改文字的顏色、影像尺寸等。在這種情況下，我們可以使用以下 jQuery 方法來更改 HTML 元素的樣式。
使用 jQuery 的 css() 方法設定選中元素的樣式
第一種方法是 css() 方法，我們可以使用它來使用 jQuery 設定選中 HTML 元素的樣式。它以屬性名稱和值作為引數。
語法
使用者可以按照以下語法使用 jQuery 的 css() 方法。
$("selector").css("property", "value");
在上述語法中，選擇器是用於訪問 HTML 元素的 CSS 選擇器。
引數
屬性 - 它是要應用於 HTML 元素的 CSS 屬性的名稱。
值 - 它是 CSS 屬性的值。
示例
在這個例子中，我們在 <head> 標籤中包含了 jQuery 指令碼以便使用它。之後，我們建立了兩個 div 元素。第一個 div 包含名為“one”的類名，第二個 div 包含名為“second”的 id。
在 jQuery 中，我們分別使用 id 和類名訪問這兩個 div，並分別應用不同的顏色到兩個 div 的文字。此外，我們透過標籤名訪問“div”元素，並更改文字的字型大小，使用者可以在輸出中觀察到這一點。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the CSS() method of jQuery to set style on selected HTML elements</h2>
<div class = "one"> First </div>
<div id = "second"> This is a second element. </div>
<script>
$(document).ready(function () {
$(".one").css("color", "red");
$("#second").css("color", "blue");
$("div").css("font-size", "20px");
});
</script>
</body>
</html>
示例
在這個例子中，我們也使用 css() 方法來設定選中 HTML 元素的樣式。但是，在這裡我們將包含屬性值對的單個物件作為 css() 方法的引數傳遞。
我們建立了一個包含多個屬性值對的單個物件。之後，我們將它作為 css() 方法的引數傳遞。在輸出中，使用者可以觀察到所有 CSS 屬性都應用到了 div 元素上。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> CSS() method of JQuery </i> to set style on selected HTML elements</h3>
<div class = "test"> This is test div. </div>
<script>
$(document).ready(function () {
// setting up multiple CSS properties for div element.
$(".test").css({
"color": "red",
"background-color": "yellow",
"border": "2px solid black",
"padding": "10px",
"font-size": "20px"
});
});
</script>
</body>
</html>
使用 jQuery 的 addClass() 方法設定選中元素的樣式
jQuery 的 addClass() 方法用於向 HTML 元素新增特定的類。在 CSS 中，我們可以向特定的類新增一些樣式。之後，每當我們需要在元素上應用該樣式時，我們就可以使用 jQuery 的 addClass() 方法向元素新增該類。
語法
使用者可以按照以下語法使用 jQuery 的 addClass() 方法來設定選中 HTML 元素的樣式
$("selecotr").addClass("classname");
在上述語法中，“classname”是要新增到 HTML 元素的類名。
示例
在下面的例子中，每當使用者點選按鈕時，它就會執行 addDemo() 函式。我們在函式中使用其 id 選擇 HTML 元素，並將“demo”類新增到 div 元素。
此外，我們還向“demo”類添加了一些樣式。在輸出中，使用者可以觀察到，每當他們點選按鈕時，“demo”類的樣式就會應用到 div 元素上。
<html>
<head>
<style>
.demo {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> addClass() method of JQuery </i> to set style on selected HTML elements.</h2>
<div id = "one">This is inside the demo div.</div>
<br>
<button onclick = "addDemo()"> Add demo class </button>
<script>
function addDemo() {
$("#one").addClass("demo");
}
</script>
</body>
</html>
使用 jQuery 的 toggleClass() 方法設定選中元素的樣式
jQuery 的 toggleClass() 方法允許使用者在兩個類之間切換。我們可以在兩個類中新增不同的 CSS 樣式並在兩個類之間切換。當我們需要在應用程式中新增深色和淺色主題時，這很有用。
語法
使用者可以按照以下語法使用 toggleClass() 方法來更改選中元素的 CSS。
$("selector").toggleClass("class1 class2");
在上述語法中，class1 和 class2 是要在其之間切換的兩個類名。
示例
在下面的例子中，我們向“one”和“two”類添加了不同的樣式。最初，我們將“one”類新增到 HTML 元素。每當使用者點選按鈕時，它就會在“one”和“two”類之間切換。在輸出中，使用者可以觀察到元素的樣式是如何變化的。
<html>
<head>
<style>
.one {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
.two {
color: red;
background-color: yellow;
border: 2px solid blue;
padding: 20px;
font-size: 3rem;
}
</style>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> toggleClass() method of JQuery </i> to set style on selected HTML elements</h2>
<div id = "element" class = "one"> This is inside the demo div.</div> <br>
<button onclick = "toggleClass()"> toggle class </button>
<script>
function toggleClass() {
// toggle between one and two class
$("#element").toggleClass("one two");
}
</script>
</body>
</html>
使用者學習瞭如何使用 jQuery 方法來設定選中 HTML 元素的 CSS 樣式。在第一種方法中，我們使用了 css() 方法，這是使用 jQuery 設定 CSS 的最佳方法。在第二種方法中，我們使用了 addClass() 方法，在第三種方法中，我們使用了 toggleClass() 方法。使用者應該根據他們在開發過程中處理的情況選擇使用任何一種方法。
260 次瀏覽
