資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究jQuery 中 css() 方法有什麼作用？
Jquery 包含各種方法，而 CSS() 是其中之一。CSS() 方法用於獲取應用於特定 HTML 元素的特定 css 屬性的值。此外，它還用於為特定 HTML 元素設定 CSS 屬性及其值。開發人員還可以使用 CSS() 方法更新 CSS 屬性值。
在本教程中，我們將學習如何使用 Jquery 的 css() 方法來訪問和設定特定 HTML 元素的 CSS 屬性。
語法
使用者可以按照以下語法使用 Jquery 的 css() 方法。
Var value = $('element').css(property);
$('element').css(property, value);
$('element').css(property, function() {
return value;
});
$('element').css({property1: value1, property2: value2, ...});
css() 方法接受一個或兩個引數。這裡，“property”是要訪問或設定其值的 CSS 屬性名稱。此外，它還接受包含 CSS 屬性多個鍵值對的物件。
示例 1
在下面的示例中，我們為 div 元素設定了背景顏色。當用戶點選按鈕時，回撥函式使用 Jquery 的 CSS() 方法訪問 div 元素的“background-color”屬性值。
在輸出中，使用者可以在點選按鈕後觀察到 div 元素的背景顏色以 RGB 值顯示。
<html>
<head>
<style>
.text {
background-color: rgb(88, 236, 236);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to access the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to get the background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color');
let output = document.getElementById('output');
output.innerHTML = "The background color of the div element is " + color;
});
</script>
</body>
</html>
示例 2
在下面的示例中，我們使用 css() 方法為 div 元素設定背景顏色。這裡，當用戶點選按鈕時，回撥函式使用其類名和 css() 方法訪問 div 元素。我們將“background-color”作為第一個引數（屬性名稱），並將“red”作為第二個引數（屬性值）。
在輸出中，使用者可以觀察到，當他們點選按鈕時，div 元素的背景顏色變為紅色。
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to set the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to set the red background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color', 'red');
});
</script>
</body>
</html>
示例 3
在下面的示例中，我們使用隨機畫素值更改 div 元素的填充。這裡，我們使用“padding”作為 css() 方法的第一個引數，並使用函式作為 css() 方法的第二個引數。
在函式中，我們使用 Math.random() 方法獲取 1 到 50 之間的隨機數，並將隨機值返回以將其設定為 HTML div 元素的填充。在輸出中，使用者可以觀察到隨機的填充值。
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to get css property value from the callback function and set it</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3> Click the below button to set the custom padding for the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('padding', function () {
// generate a random number between 0 to 50
var random = Math.floor(Math.random() * 50);
let padding = random + 'px';
let output = 'The padding value is: ' + padding;
$('#output').text(output);
return padding;
});
});
</script>
</body>
</html>
示例 4
在下面的示例中，我們使用 CSS() 方法將多個 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>
<h2>Using the <i> CSS() method </i> of JQuery to set multiple CSS properties to the element</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3>Click the below button to set multiple CSS properties to the above div element.</h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css({
'color': 'red',
'background-color': 'blue',
'font-size': '20px',
'border': '2px solid green',
"width": "500px",
"height": "50px",
});
});
</script>
</body>
</html>
開發人員學習如何使用 Jquery 的 css() 方法。在第一個示例中，我們使用 css() 方法訪問 CSS 屬性值。在第二個示例中，我們已將 CSS 屬性設定為 HTML 元素。
在第三個示例中，我們將函式返回的值設定為 CSS 屬性值。在最後一個示例中，我們使用 CSS() 方法將多個 CSS 屬性值設定為 HTML 元素。
258 次瀏覽
