标签:
一、获取特定元素节点的属性的值_getAttribute()
1、getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById(‘box‘); alert(box.bbb); // 获取元素的自定义属性值,非 IE 不支持 自定义的属性不可以,结果是undefined alert(box.getAttribute(‘bbb‘)); //获取元素的自定义属性值 这种方法可以兼容自定义属性 alert(box.getAttribute(‘class‘)); //getAttribute方法获取标签中的class属性的值时在IE6,7中使用className,其他使用class需要做兼容 //跨浏览器获取class属性的值 if(box.getAttribute(‘className‘)==null){ alert(box.getAttribute(‘class‘)); }else{ box.getAttribute(‘className‘); } }; </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div> </body> </html>
二、设置特定元素节点的属性的值_setAttribute()
1、setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。
<script type="text/javascript"> window.onload = function () { var box = document.getElementById(‘box‘); box.setAttribute(‘title‘,‘我是标题啊‘); alert(box.title); }; </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div> </body> </html>
2、使用该方法设置class和style属性的时候在IE6,7中无效(所以不建议使用)
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById(‘box‘); box.setAttribute(‘style‘,‘color:green‘);//IE6,7无效 box.setAttribute(‘class‘,‘pox‘);//IE6,7无效 }; </script> </head> <body> <div id="box" title="标题" style="color:#F00;" bbb="aaa">测试Div</div> </body>
三、removeAttribute()可以移除 HTML 元素中的属性。 IE6不支持
<script type="text/javascript"> window.onload = function () { var box = document.getElementById(‘box‘); box.removeAttribute(‘title‘); alert(box.title); }; </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div> </body> </html>
JavaScript的DOM_获取/设置/移除特定元素节点的属性_getAttribute()/setAttribute()/removeAttribute()
标签:
原文地址:http://www.cnblogs.com/LO-ME/p/4587423.html