資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 jQuery 中設定特定 div 的背景顏色？
jQuery 是一個非常流行且廣泛使用的 JavaScript 庫，用於編寫和操作 HTML 文件、處理事件以及為網頁新增動態效果和動畫。有時我們需要為網頁中的特定 div 設定樣式，但不知道使用哪種方法以及如何使用。
設定 div 樣式的過程非常簡單，可以使用 jQuery 來設定特定 div 元素的背景顏色。此過程包括使用選擇器選擇特定的 div 元素，然後應用 CSS 樣式來設定背景顏色。
jQuery 提供多種方法可以設定 HTML 中任何 div 元素的背景顏色。在本文中，我們將瞭解如何設定特定 div 的背景顏色，以及在 jQuery 中可用的不同方法。
設定特定 div 背景顏色的方法
設定背景顏色是一項非常簡單的任務，但由於其簡單性，有很多方法可以完成相同的任務。現在讓我們看看一些不同的方法：
使用 CSS() 方法
CSS() 方法是 jQuery 的內建方法，用於設定或獲取 HTML 元素任何 CSS 屬性的值。此方法可用於設定特定 div 的背景顏色。要實現這一點，請首先檢視以下語法：
語法
$(document).ready(function() {
// Select the div element using its ID and set its background color to red
$("#myDiv").css("background-color", "red");
});
示例
在這種方法中，我們使用了稱為 CSS() 方法的 jQuery 方法之一，該方法可用於設定具有特定 ID 的特定 div 元素的背景顏色。以下是示例的 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using css() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<p>Setting background color of a div using css() Method</p>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").css("background-color", "green");
});
</script>
</body>
</html>
輸出
在此示例中，我們使用了一個 ID 為“divNew”的 div 元素，其中包含在 CSS 樣式中定義的一些 CSS 屬性，如寬度、高度和邊框。在這裡，我們將使用 jQuery 選擇器選擇 ID 為“divNew”的 div 元素，並使用 jQuery css() 方法將其背景顏色設定為綠色。
使用 attr() 方法
attr() 方法是另一個 jQuery 方法，用於設定 HTML 元素屬性的值。我們可以使用此方法來設定任何特定 div 的背景顏色。為此，我們可以將 div 元素的“style”屬性設定為“background-color: green”（僅舉一個例子）。請參閱以下語法瞭解更多詳細資訊：
語法
$(document).ready(function() {
// Select the div element using its ID and set its "style" attribute to "background-color: red"
$("#myDiv").attr("style", "background-color: red");
});
示例
在這種方法中，我們使用 div 的“style”屬性向特定 div 元素新增任何背景顏色。以下是示例的 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using attr() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid black;
}
.background {
background-color: blue;
}
</style>
</head>
<body>
<p>Setting background color of a div using attr() Method</p>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").attr("style", "background-color: pink");
});
</script>
</body>
</html>
輸出
在此示例中，我們建立了一個 ID 為“divNew”的 div 元素，該元素在 CSS 樣式中定義了一些屬性，如寬度、高度等。在這裡，我們將使用 jQuery 選擇器之一來選擇 ID 為“divNew”的 div 元素，以設定其“style”屬性以在 div 元素中包含背景顏色。
使用 addClass() 方法
addClass() 方法也是 jQuery 的一部分，它是一個內建方法，用於向 HTML 元素新增一個或多個 CSS 類。此方法也可用於設定特定 div 的背景顏色。為此，我們必須建立一個具有所需背景顏色的 CSS 類，然後可以使用相同的方法將其新增到 div 元素。請參閱以下語法：
語法
$(document).ready(function() {
// Create a CSS class with the desired background color
.red-background {
background-color: red;
}
// Select the div element using its ID and add the CSS class to it
$("#myDiv").addClass("red-background");
});
示例
在這種方法中，我們需要建立一個具有特定背景顏色的 CSS 類，然後使用 addClass() 方法將該類新增到特定 div 元素。以下是示例的 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using addClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid green;
}
.background {
background-color: blue;
}
</style>
</head>
<body>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").addClass("background");
});
</script>
</body>
</html>
輸出
在此示例中，我們定義了一個名為“background”的 CSS 類，以新增我們的背景顏色以新增 div 元素。建立類後，我們現在可以使用程式碼中的 jQuery addClass() 方法將此類新增到 ID 為“divNew”的 div 元素。
結論
jQuery 為使用者提供了多種方法來設定樣式，並向其 HTML 文件或頁面新增功能。設定 HTML 中特定 div 的背景顏色就是這樣一種問題，其中有多種方法可以完成此任務。CSS() 方法是我們在本文中看到的第一個方法，可用於透過選擇具有其 ID 的 div 來設定任何 div 元素的背景顏色。其次，attr() 方法也用於設定 div 元素的 style 屬性以新增背景顏色。最後一種方法是 addClass() 方法，它也用於透過建立具有所需背景顏色的 CSS 類並將其新增到 div 元素來新增背景顏色。本文中討論的每種方法都易於使用，並且可以幫助在網頁上實現所需的使用者介面。
1K+ 瀏覽量
