資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 設定元素的背景顏色？
jQuery 是一款非常流行的 JavaScript 工具，它有助於簡化 Web 開發過程，包含各種可用於操作 HTML 元素、CSS 屬性甚至事件處理的工具。根據使用者互動動態新增或修改 HTML 元素的樣式就是一項需要基於此的常見任務。
jQuery 提供多種方法，可以使用 jQuery 來設定 HTML 元素的背景顏色。我們將瞭解一些不同的方法，包括使用 CSS() 方法、使用 addClass() 方法和使用 attr() 方法。每種方法都有其優缺點，選擇哪種方法取決於應用程式的具體需求。
在本文中，我們將瞭解如何使用 jQuery 設定 HTML 中元素的背景顏色。
使用 jQuery 設定元素背景顏色方法
設定 HTML 元素的背景顏色是一項非常簡單的任務，但由於其簡單性，可以使用多種方法完成相同的任務。現在讓我們瞭解一些不同的方法來實現此目的 -
使用 CSS() 方法
第一種方法是 CSS() 方法，該方法用於將 CSS 屬性設定為 HTML 元素。我們也可以使用此方法來設定元素的背景顏色。為此，我們可以將 CSS 屬性名稱和值作為引數傳遞。
語法
檢視以下語法以獲取更多詳細資訊 -
$(document).ready(function(){
$("button").click(function(){
$("span").css("background-color", "green");
});
});
在這裡，我們選擇 span 元素，並在單擊按鈕時將其背景顏色設定為綠色。
示例
檢視以下示例以瞭解如何使用 css 方法設定元素的背景顏色。
<!DOCTYPE html>
<html>
<head>
<title>Set background color using jQuery - css() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* This is our default style for span element*/
#bgSpan {
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Setting background color using jQuery - css() method</h2>
<button id="btnColor">Click here</button>
<span id="bgSpan">Welcome to Tutorialspoint</span>
<script>
$(document).ready(function() {
$("#btnColor").click(function() {
$("#bgSpan").css("background-color", "lightgreen");
});
});
</script>
</body>
</html>
輸出
在上面的示例中，我們建立了一個按鈕，當單擊該按鈕時，它將使用 CSS() 方法將 id 為“bgSpan”的 span 元素的背景顏色設定為淺綠色。
使用 attr() 方法
attr() 方法用於設定 HTML 元素的屬性。現在，此方法也可用於設定元素的 style 屬性以定義 CSS 屬性。要使用此方法設定元素的背景顏色，我們可以將 style 屬性與 CSS 屬性作為引數傳遞。
語法
檢視以下語法以獲取更多詳細資訊 -
$(document).ready(function(){
$("button").click(function(){
$("span").attr("style", "background-color: green, border: 1px solid green");
});
});
在這裡，我們選擇 span 元素，並在單擊按鈕時將其背景顏色設定為綠色，並設定 1px 實線綠色邊框。
示例
檢視以下示例以瞭解如何使用 attr() 方法設定元素的背景顏色。
<!DOCTYPE html>
<html>
<head>
<title>Set background color using jQuery - attr() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* This is our default style for span element*/
#bgSpan {
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<button id="btnColor">Click here</button>
<span id="bgSpan">Welcome to Tutorialspoint</span>
<script>
$(document).ready(function() {
$("#btnColor").click(function() {
$("#bgSpan").attr("style", "background-color: lightgreen");
});
});
</script>
</body>
</html>
輸出
在上面的示例中，我們建立了一個按鈕，當單擊該按鈕時，它將使用 attr() 方法將 id 為“bgSpan”的 span 元素的 style 屬性設定為“background-color: lightgreen”。與上述方法相比，此方法功能更強大，但也更容易出錯，因為我們需要使用正確的 CSS 規則語法。
使用 addClass() 方法
設定背景的另一種方法是使用 addClass() 方法。此方法用於向選定的元素新增一個或多個類。為此，我們必須在樣式表中為這些類定義一些 CSS 規則。但是，要設定元素的背景顏色，我們必須定義一個具有所需背景顏色的類並將其新增到元素中。
語法
檢視以下語法以獲取更多詳細資訊 -
$(document).ready(function(){
$("button").click(function(){
$("span").addClass("green-background");
});
});
在這裡，我們在樣式表中定義了一個名為“green-background”的 CSS 類，該類具有綠色的背景顏色。現在，當單擊按鈕時，此類將新增到 span 元素中。
示例
檢視以下示例以瞭解如何使用 addClass() 方法設定元素的背景顏色。
<!DOCTYPE html>
<html>
<head>
<title>Set background color using jQuery -addClass() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* This is our default style for span element*/
.green-background {
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
background-color: green;
}
</style>
</head>
<body>
<button id="btnColor">Click here</button>
<span id="bgSpan">Welcome to Tutorialspoint</span>
<script>
$(document).ready(function() {
$("#btnColor").click(function() {
$("#bgSpan").addClass("green-background");
});
});
</script>
</body>
</html>
輸出
在上面的示例中，我們建立了一個按鈕，當單擊該按鈕時，它將使用 addClass() 方法將類名為“green-background”的 span 元素的 style 屬性設定為“background-color: green”。它還在單擊按鈕時設定了四個不同的 CSS 屬性，包括設定高度、寬度、填充和字型大小。
結論
在本文中，我們學習了多種使用名為 jQuery 的強大庫來設定元素背景顏色的方法。我們瞭解了設定背景顏色的不同方法，包括 CSS() 方法、attr() 方法和 addClass() 方法。所有這些方法都是使用 jQuery 樣式化 HTML 元素的一些常用方法。首先，我們瞭解了 CSS() 方法，該方法用於設定元素的 CSS 屬性，然後我們瞭解了另一種稱為 attr() 方法的方法，該方法用於設定元素的屬性，並且藉助於此，我們還可以設定元素的背景顏色。我們看到的最後一種方法是 addClass() 方法，它向元素新增一個類以定義元素的 CSS 屬性。從上述所有方法中選擇任何方法取決於專案需求等。因此，請根據您的需求仔細選擇和使用方法，並牢記其優缺點。
1K+ 次瀏覽
