JS中Attr的用法详解
在JavaScript中，Attr（Attribute）指元素的特性或属性。Attr可以添加、修改和删除元素的属性。在DOM中，Attr是通过一个节点对象的attributes属性来获取和操作的。
Attr的获取
我们可以使用 getAttribute 方法获得一个指定属性的值。比如我们需要获取一个 id="myId" 的元素的 id 属性值：
var myElement = document.getElementById("myId");
var idValue = myElement.getAttribute("id");
console.log(idValue); // 输出 "myId"
同样，我们可以通过 setAttribute 方法设置元素的属性值：
myElement.setAttribute("class", "myClassName");
这行代码就会添加一个 class="myClassName" 特性到 myElement 元素中。
Attr值的修改
我们也可以通过 setAttribute 方法修改已有属性的值：
var myElement = document.getElementById("myId");
myElement.setAttribute("class", "newClassName");
这行代码就会将 myElement 元素的 class 属性修改为 newClassName。
Attr的删除
我们可以使用 removeAttribute 方法来删除一个特定的属性。比如我们需要删除一个 id="myId" 的元素的 id 属性：
var myElement = document.getElementById("myId");
myElement.removeAttribute("id");
这行代码会删除 myElement 元素的 id 属性。
实际示例
以下是两个实际应用示例：
示例1：修改图片src属性
当用户点击页面上的按钮时，将一张图片的 src 属性修改为另一张图片的路径。
HTML代码：
<body>
<img id="myImg" src="img1.jpg" alt="图片1">
<button onclick="changeImg()">点击我以切换图片</button>
</body>
JavaScript代码：
function changeImg() {
var myImg = document.getElementById("myImg");
myImg.setAttribute("src", "img2.jpg");
}
点击按钮后，图片将替换为 img2.jpg。
示例2：删除无效的class属性值
在一个页面中，有一些 class 属性的值是无效的。我们需要使用 JavaScript 删除这些无效的值，以免影响页面布局。
HTML代码：
<body>
<div class="container myClass anotherClass"></div>
<script>
var container = document.querySelector(".container");
var classList = container.getAttribute("class").split(" ");
for (var i = 0; i < classList.length; i++) {
if (!isValidClass(classList[i])) {
container.removeAttribute("class");
break;
}
}
function isValidClass(classValue) {
return (classValue === "container" || classValue === "myClass");
}
</script>
</body>
在上面的例子中，我们获取了通过 querySelector 方法获取了 container 元素。然后，我们使用 getAttribute 方法获取了 container 元素的 class 属性值，并使用 split 方法将其拆分为一个数组。我们遍历数组，并使用 isValidClass 方法来检查属性值是否有效。如果属性值无效，我们就使用 removeAttribute 方法将整个 class 属性删除。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中Attr的用法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 