<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对html元素属性的增删改查操作</title>
<style>
#attr{text-align:center;font-size:24px;color:white;background:#008000;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>