JavaScript教程-JavaScript removeAttribute() 方法
此方法用于从元素中移除指定的属性。它与 removeAttributeNode() 方法不同。removeAttributeNode() 方法移除特定的 Attr 对象，而 removeAttribute() 方法会移除具有指定名称的属性。
语法
element.removeAttribute(attributename)参数值
attributename: 这是必需的参数，用于指定要从元素中移除的属性的名称。如果属性不存在，该方法不会产生任何错误。
我们通过一些示例来理解它。
示例1
在这个示例中，有两个带有 id para 和 para1 的段落元素，它们都属于相同的类 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 div1 和 div2 的 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 属性等。
