jQuery 中 css() 方法有什么用？

百变鹏仔 3个月前 (09-20) #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'属性值。

在输出中，用户可以在单击按钮后观察 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() 方法有什么用？

语法

示例 1

示例 2

示例 3

Example 4

示例4

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写