转自：http://my.oschina.net/felay/blog/303470
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对html元素属性的增删改查操作</title> <style> #attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; } .myclass{background:#828555;} </style> </head> <body> <div id="attr" class = "attrs" lang = "en" >对html元素属性的增删改查操作</div> <hr /> <button id="getAttr" onclick="getAttr()">访问DIV属性</button> <button id="updateAttr" onclick="updateAttr()">修改DIV属性</button> <button id="deleteAttr" onclick="deleteAttr()">删除DIV属性</button> <button id="addAttr" onclick="addAttr()">增加DIV属性</button> <script> //简化打印 function print(str){ document.write(str+"<br/>"); } //简化获取id function $(id){ return document.getElementById(id); } //遍历元素属性 function listNodeList(attrList){ for (var i = 0; i < attrList.length; i++) { print(attrList[i].nodeName+"--->"+attrList[i].nodeValue); } } //访问其属性 function getAttr(){ var divNode = $("attr"); var attrList = divNode.attributes; print("属性名称--->属性值"); listNodeList(attrList); } //修改属性,两种方式,推荐前一种 function updateAttr(){ var divNode = $("attr"); //第一种 divNode.setAttribute("class","myclass"); //推荐这种 //第二种 /* var attrList = divNode.attributes; for (var i = 0; i < attrList.length; i++) { if(attrList[i].nodeName == "class"){//如果属性值为class,我们就修改它 attrList[i].nodeValue = "myclass"; break; } } listNodeList(attrList);//如果查看修改的属性值,打开注释 */ } //删除指定属性 function deleteAttr(){ var divNode = $("attr"); divNode.removeAttribute("id"); } //增加新的属性 function addAttr(){ var divNode = $("attr"); var attrList = divNode.attributes; divNode.setAttribute("title","mytitle"); listNodeList(attrList); } </script> </body> </html>