思路：1:做好页面
2 监听属性
其中把点击事件和document绑定，这样只需要绑定一次就可以监听到所有的事件
把处理点击事件的代码封装起来。使他能够处理多种空间的多种属性的改变
为控件添加flag属性，使他标志点击后处理函数处理流程。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width: 100px;height: 100px;border: 1px red solid;}
</style>
</head>
<body>
属性名字：<input type="text" id="textAttrId" />
属性值：<input type="text" id="textValueId" />
<div id="divId"></div>
<div id="divId02"></div>
<div id="divId03"></div>
</body>
<script type="text/javascript">
window.οnlοad=function (){
// 获得三个div的控件
var div02 = document.getElementById("divId02");
var div03 = document.getElementById("divId03");
var divI = document.getElementById("divId");
divI.flag = true;
div03.flag = true;
div02.flag = true;
// 监听点击事件
document.onclick = function (event){
var textAttr = document.getElementById("textAttrId").value;
var textValue = document.getElementById("textValueId").value;
change(event.target,textAttr,textValue); // 调用封装函数
}
// 封装函数
function change (divName,divAttr,divAttrVakue){
if(event.target.flag){
divName.style[divAttr] = divAttrVakue;
event.target.flag = !event.target.flag;
}else{
divName.removeAttribute("style");
event.target.flag = !event.target.flag;
}
}
}
</script>
</html>
效果图
918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
