使用 HTML DOM 可以访问或设置元素的属性，在实际应用中，常常需要使用 JavaScript 来动态地读取、设置和删除元素的某些属性值，比如添加 class 属性，就可以给 HTML 元素增加某些预先设置好的 CSS 样式。
图 1：使用相关属性方法操作属性
在 JavaScript 中，与操作属性有关的三个方法分别是 getAttribute()、setAttribute() 和 removeAttribute()，看名字就知道它们的作用了。
需要特别注意的是，使用HTML DOM操作元素属性时存在一些注意事项，具体事项请参见“JS操作元素属性时的注意事项”一节。
getAttribute() 用于获取指定属性的值，setAttribute() 用于设置属性，removeAttribute() 用于删除指定属性，这 3 个方法都只能对行间属性进行操作，对自定义的属性，这 3 个方法无效。下面通过例 1 演示这 3 个方法的使用。
【例 1】使用 HTML DOM 的相关方法对行间属性进行操作。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML DOM的相关方法对行间属性进行操作</title>
<script>
window.onload = function(){
var oImg = document.getElementById('img');
console.log("图片的src属性值为："+oImg.getAttribute('src'));
oImg.setAttribute('title','海滩');
console.log("设置的title属性值为："+oImg.getAttribute('title'));
oImg.removeAttribute('title');
console.log("删除title属性后的title属性值为："+oImg.getAttribute('title'));
oImg.index = 1;
console.log("使用getAttribute()获取的自定义的index属性值为："+
oImg.getAttribute('index'));//无效
oImg.removeAttribute('index');//无效
console.log("使用对象引用属性的方法获取的自定义的index属性值为："+oImg.index);
};
</script>
</head>
<body>
<img src="images/p1.jpg" id='img'/>
</body>
</html>
例1中的 HTML 代码设置了 img 元素具有两个行间属性，在 JS 代码中又通过 setAttribute() 添加了一个 title 行间属性，同时自定义了一个 index 属性。上述代码在 Chrome 浏览器中的运行结果如图 1 所示。从图 1 中可以看到，getAttribute() 和 removeAttribute() 操作自定义属性都无效。
图 1：使用相关属性方法操作属性
注：使用 getAttribute('src') 方法获取的图片的路径，该值和元素引用 src 获取的值不一样，它在任何浏览器中都不会进行编码，因而在不同的浏览器值都相等，所以该值可以用来进行判断。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/24016.html