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'属性值。
在输出中，用户可以在单击按钮后观察 rgb 值中 div 元素的背景颜色。
<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>
example 4的中文翻译为：示例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元素。
以上就是jquery 中 css() 方法有什么用？的详细内容。