您的位置：首页 > Web前端 > JavaScript

用JS监听事件（函数封装）修改页面属性

2016-04-28 14:21 489 查看

思路：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.onload=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>

效果图

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

标签：

相关文章推荐

新的分享

章节导航