如何使用 jQuery 新增和刪除 CSS 類別到元素？-css教學-PHP中文網

addClass()方法

文法

removeClass() 方法

方法

範例

輸出

結論

首頁

web前端

css教學

如何使用 jQuery 新增和刪除 CSS 類別到元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 28, 2023 am 11:41 AM

如何使用 jQuery 添加和删除 CSS 类到元素？

CSS 類別在網頁設計中發揮關鍵作用，並對網頁的綜合外觀產生重大影響。由於頁面的美觀越來越受到重視，動態客製化網頁可以大大提高其價值。乍一看，這個任務可能看起來很嚇人，但是利用 jQuery，可以毫不費力地從 HTML 元件中即時附加或提取 CSS 類，從而提供一種快速、輕鬆的方法來生成互動式動態網頁。透過附加或消除 CSS 類，我們可以根據使用者操作或頁面出現情況現場修改元件的表示方式，從而改善網頁的客製化和使用者友善性。

addClass()方法

內建 jQuery 方法 addClass() 用於為每個選定元素提供新屬性。此外，它還可用於修改所選元素的屬性。

文法

$('selector').addClass(className);

登入後複製

removeClass() 方法

JQuery 提供了一個名為removeClass() 的內建函數，可用來從指定元素中刪除一個或多個類別名稱。

文法

$(selector).removeClass(className, function(index, currentClassName))

登入後複製

方法

我們將利用上面討論的addClass()和removeClass()方法分別在元素中新增和刪除CSS類別。

上面的程式碼分為三個元件：HTML 頁面、CSS 樣式表和最後的 jQuery 腳本。讓我們一一深入探討這三者。

HTML 頁面由三個元件組成 -

標記，它將充當我們將在其上新增或刪除類別的元素。
「新增 CSS 類別」標籤按鈕，我們將使用它來為元素新增 CSS 類別
#「刪除 CSS 類別」標籤按鈕，我們將使用它從元素中刪除 CSS 類別。

現在談到 CSS 部分，我們使用 CSS 來設定名為「p-style」的 CSS 樣式，該 CSS 具有一些特定屬性，例如背景顏色、填充、邊距、顏色和文字對齊。我們將使用 jQuery 在 HTML 元素中動態新增和刪除此類。

最終，我們制定了在腳本中附加和撤銷 CSS 類別的基本原理。為了實現這項任務的多功能性，我們使用了前面提到的 addClass() 和 removeClass() 函數。我們實作了 addClass() 函數，將「p-style」類別動態附加到段落元素。相反，我們執行了removeClass()函數來動態地從段落元素中刪除「p-style」類別。仔細觀察程式碼可以發現，我們已經將這些函數的使用分別整合到了「新增 CSS 類別」和「刪除 CSS 類別」按鈕的點擊事件中。

範例

以下是我們將在本範例中使用的完整程式碼 -

<!DOCTYPE html>
<html>
<head>
   <title>How to add and remove CSS classes to an element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <style>
      .p-style{
         background-color: black;
         padding: 3px;
         margin: 2px;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <h4>How to add and remove CSS classes to an element using jQuery?</h4>
   <div>
      <p>This is some text.</p>
   </div>
   <br/>
   <div>
      <button id="add-class">Add CSS Class</button>
      <button id="remove-class">Remove CSS Class</button> 
   </div>
   <script>
      $(document).ready(function(){
         $('#add-class').click(function(){
            $('p').addClass('p-style');
         })
         $('#remove-class').click(function(){
            $('p').removeClass('p-style');
         })
      })
   </script>
</body>
</html>

登入後複製

輸出

檔案輸出 css class.gif 將插入此處。

結論

作為推論，透過使用 jQuery 將 CSS 分類動態附加或分離到 HTML 元件的能力可以大大增強網頁的功能和美觀。這種腳本語言的實現使網頁設計人員能夠制定互動式且具有視覺吸引力的網頁佈局，從而改善使用者體驗。此外，jQuery 的通用性和彈性特性使其成為任何 Web 開發企業中的寶貴工具，並且它對 DOM 操作任務的高效處理減輕了開發人員的時間和勞動力。從本質上講，巧妙地利用 jQuery 將 CSS 分類附加或分離到 HTML 元素是實現精緻而複雜的網頁外觀的簡單但有效的方法。

以上是如何使用 jQuery 新增和刪除 CSS 類別到元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn