<!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>
扫一扫
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
