您的位置：首页 > 其它

DOM属性操作

2016-07-12 08:54 239 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
.aaa{
width:
100px;
height:
100px;
background-color: red;
}
.bbb{
width:
200px;
height:
200px;
background-color: lawngreen;
}
</style>
</head>
<body>
<div
id="div1"
class="aaa">
test
</div>
<input
type="button"
id="btn" value="setAttribute"
onclick="myFunc()"/>
<input
type="button"
id="btn2" value="removeAttribute"
onclick = "myFunc2()"/>
<input
type="button"
id="btn3" value="getAttribute"
onclick = "myFunc3()"/>
<script
type="text/javascript">
/*dom属性操作
1.setAttribute(name，value) 设置节点上name属性的值为value
2.getAttribute(name) 获取节点上属性为name的值
3.removeAttribute(name) 移除节点上name属性的值
*/

// 设置属性
function
myFunc(){
var
div1 = document.getElementById("div1");
div1.setAttribute("class","bbb");
}
// 移除属性
function
myFunc2(){
var
div1 = document.getElementById("div1");
div1.removeAttribute("class");
}
// 获取属性
function
myFunc3(){
var
div1 = document.getElementById("div1");
console.log(div1.getAttribute("class"));
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM 属性操作

相关文章推荐

新的分享

章节导航