此方法用于从元素中移除指定的属性。它与 removeAttributeNode() 方法不同。removeAttributeNode() 方法移除特定的 Attr 对象,而 removeAttribute() 方法会移除具有指定名称的属性。

语法

element.removeAttribute(attributename)

参数值

attributename: 这是必需的参数,用于指定要从元素中移除的属性的名称。如果属性不存在,该方法不会产生任何错误。

我们通过一些示例来理解它。

示例1

在这个示例中,有两个带有 id parapara1 的段落元素,它们都属于相同的类 jtp。在这里,我们正在移除这些段落元素的 class 属性。我们需要点击给定的 HTML 按钮 来查看效果。

<!DOCTYPE html>  
<html>  

<head>  
  <title> The removeAttribute Method </title>
  <style>
    .jtp {
      color: red;
      background-color: yellow;
    }
  </style>
</head>  

<body> 
  <h1> Welcome to the javaTiku.cn </h1>
  <h2> Example of the removeAttribute() Method </h2>
  <p id="para" class="jtp"> This is a paragraph element. </p>
  <p id="para1" class="jtp"> This is the second paragraph element. </p>
  <button onclick="fun()"> Click me! </button>
  <script>
    function fun() {
      document.getElementById("para").removeAttribute("class");
      document.getElementById("para1").removeAttribute("class");
    }
  </script>
</body>

</html>

示例2

在这个示例中,有两个带有 id div1div2 的 div 元素。我们将 style 属性应用于这些 div 元素。

在这里,我们正在移除这些 div 元素的 style 属性。我们需要点击给定的 HTML 按钮 来查看效果。

<!DOCTYPE html>  
<html>  

<head>  
  <title> The removeAttribute Method </title>
  <style>
    .jtp {
      color: red;
      background-color: yellow;
    }
  </style>
</head>  

<body> 
  <h1> Welcome to the javaTiku.cn </h1>
  <h2> Example of the removeAttribute() Method </h2>
  <div id="div1" style="background-color: yellow; font-size: 25px; color: red; border: 2px solid red;"> This is the first div element. </div>
  <div id="div2" style="background-color: lightblue; font-size: 25px; color: blue; border: 2px solid blue;"> This is the second div element. </div>
  <button onclick="fun()"> Click me! </button>
  <script>
    function fun() {
      document.getElementById("div1").removeAttribute("style");
      document.getElementById("div2").removeAttribute("style");
    }
  </script>
</body>

</html>

类似地,我们可以使用 removeAttribute() 方法来移除 target 属性、align 属性、readonly 属性等。

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全

添加新评论