jQuery 中的 css() 方法有什么用?

cssjqueryweb developmentfront end technology更新于 2024/5/4 8:44:17

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() 方法的第一个参数，并将 function 用作 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 元素。