首页 > 编程笔记 > JavaScript笔记 阅读:119

JS元素属性的设置、获取和删除

使用 HTML DOM 可以访问或设置元素的属性,在实际应用中,常常需要使用 JavaScript 来动态地读取、设置和删除元素的某些属性值,比如添加 class 属性,就可以给 HTML 元素增加某些预先设置好的 CSS 样式。

在 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 获取的值不一样,它在任何浏览器中都不会进行编码,因而在不同的浏览器值都相等,所以该值可以用来进行判断。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章