极客教程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>使用 JQuery 的 CSS() 方法访问 background-color 的值</h2>
<div class = "text">这是一个示例 div 元素。</div>
<h3>点击下面的按钮以获取上面 div 元素的背景颜色。</h3>
<button id = "btn">点击我</button>
<div id = "output"></div>
<script>
('#btn').click(function () {
var color =('.text').css('background-color');
let output = document.getElementById('output');
output.innerHTML = "div 元素的背景颜色是 " + 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>使用 JQuery 的 CSS() 方法设置 background-color 的值</h2>
<div class = "text">这是一个示例 div 元素。</div>
<h3>点击下面的按钮以设置上面的 div 元素的红色背景颜色。</h3>
<button id = "btn">点击我</button>
<script>
('#btn').click(function () {
var color =('.text').css('background-color', 'red');
});
</script>
</body>
</html>
示例 3
在下面的示例中，我们使用 css() 方法更改带有随机像素值的 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>使用 JQuery 的 CSS() 方法从回调函数中获取 CSS 属性值并设置它</h2>
<div class = "text">欢迎来到 TutorialsPoint！</div>
<h3>点击下面的按钮以为上面的 div 元素设置个性化填充。</h3>
<button id = "btn">点击我</button>
<div id = "output"></div>
<script>
('#btn').click(function () {
var color =('.text').css('padding', function () {
// 生成 0 到 50 之间的随机数
var random = Math.floor(Math.random() * 50);
let padding = random + 'px';
let output = '填充值为：' + padding;
$('#output').text(output);
return padding;
});
});
</script>
</body>
</html>
示例 4
在下面的示例中，我们使用 CSS() 方法为访问的 HTML 元素设置了多个 CSS 属性。在这里，我们将对象作为 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>使用JQuery的<i> css() 方法</i>为元素设置多个CSS属性</h2>
<div class="text">欢迎来到TutorialsPoint！</div>
<h3>点击下面的按钮为上面的div元素设置多个CSS属性。</h3>
<button id="btn"> 点击我 </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元素。