jQuery 中 css() 方法有什麼用？-css教學-PHP中文網

首頁

web前端

css教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 03:17 PM

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'屬性值。

在輸出中，使用者可以在點擊按鈕後觀察 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 id="Using-the-i-CSS-method-i-of-JQuery-to-access-the-value-of-background-color">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 id="Click-the-below-button-to-get-the-background-color-of-the-above-div-element"> 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 id="Using-the-i-CSS-method-i-of-JQuery-to-set-the-value-of-background-color">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 id="Click-the-below-button-to-set-the-red-background-color-of-the-above-div-element"> 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 id="Using-the-i-CSS-method-i-of-JQuery-to-get-css-property-value-from-the-callback-function-and-set-it">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 id="Click-the-below-button-to-set-the-custom-padding-for-the-above-div-element"> 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 id="Using-the-i-CSS-method-i-of-JQuery-to-set-multiple-CSS-properties-to-the-element">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 id="Click-the-below-button-to-set-multiple-CSS-properties-to-the-above-div-element">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() 方法有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除