聊聊jQuery中動態移除屬性的方法-前端問答-PHP中文網

聊聊jQuery中動態移除屬性的方法

PHPz

發布： 2023-04-06 11:16:15

原創

679 人瀏覽過

jQuery 是一種廣泛使用的 JavaScript 函式庫，它優化了 DOM 操作的方式，進行了簡化和統一。 jQuery 提供了大量的封裝函數，以便於使用常見的 DOM 操作，例如新增、刪除、修改 DOM 元素的屬性和內容等。其中，attr() 函數就是用來取得或設定 DOM 元素的屬性值的方法。但有時候我們需要移除某個屬性，此時就需要用到 attr() 的 removeAttr() 方法。本文將會向大家介紹 jQuery 中動態移除屬性的方法。

jQuery attr() 概述

在介紹動態移除屬性之前，我們先來回顧一下 jQuery 的 attr() 函數。 attr() 函數有取得或設定DOM 元素屬性值的功能，用法如下：

// 获取属性值
$(selector).attr(attribute)
// 设置属性值
$(selector).attr(attribute,value)

登入後複製

selector 是用來指定HTML 元素或元素集合的選擇器；
attribute 是一個屬性名稱字串；
value 是屬性值字串或函數。

如果需要同時設定多個屬性，可以使用物件作為參數，語法如下：

$(selector).attr({attribute1:value1, attribute2:value2, ...})

登入後複製

jQuery removeAttr() 方法

removeAttr() 函數是jQuery 中動態移除屬性的函數，其語法為：

$(selector).removeAttr(attribute)

登入後複製

其中，selector 和attribute 的意義跟attr() 函數中的一樣。 removeAttr() 函數可以動態地移除 HTML 屬性，使其回到預設狀態。

舉個例子，我們可以透過下面的程式碼來移除元素的「disabled」屬性：

$("input[type='button']").removeAttr("disabled");

登入後複製

注意，removeAttr() 函數只能移除那些存在於HTML元素中的屬性。如果元素設定了屬性並透過 CSS 進行了修改，那麼方法就無法移除那些修改過的屬性值。

jQuery attr() 和 removeAttr() 實例

在下面的實例中，我們使用 attr() 和 removeAttr() 方法來動態地修改 HTML 元素的屬性。我們首先建立一段 HTML 程式碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery attr() 和 removeAttr() 实例</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").attr("style","background-color:yellow; font-size:24px;");
      });
      $("input[type='button']").click(function(){
        $("p").removeAttr("style");
      });
    });
  </script>
  <style>
    p {
      background-color: lightblue;
      font-size: 20px;
    }
  </style>
</head>
<body>

<h2>jQuery attr() 和 removeAttr() 实例</h2>

<p>点击第一个按钮将更改样式。</p>

<button>更改样式</button>
<input type="button" value="移除样式">

</body>
</html>

登入後複製

我們在該文字程式碼中引用了最新版本的 jQuery 函式庫，並建立了一個包含一個按鈕和一個輸入框的 HTML 頁面。當使用者按一下 “更改樣式” 按鈕時，

元素背景顏色將變更為黃色，並且字體大小將變更為 24px。當使用者點選 “移除樣式” 按鈕時，

元素將恢復為預設狀態。這兩個按鈕的事件處理函數使用了 jQuery 的 attr() 和 removeAttr() 方法。當然，我們也可以在控制台中測試這兩種方法。

以上是聊聊jQuery中動態移除屬性的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！