javascript 案例一(控制元素属性)

改变元素样式

目标是修改div的宽度,高度,背景色,显示隐藏。

html:
<style>
#btn{text-align:center;}
#btn input{margin:10px;}
#div1{width:100px;background-color: #000;height:100px;margin:20px auto;}
</style>

<div id=”container”>
<div id=”btn”>
<input type=”button” value=”width” id=”width”>
<input type=”button” value=”height” id=”height”>
<input type=”button” value=”backgroundcolor” id=”backgroundcolor”>
<input type=”button” value=”hide” id=”hide”>
<input type=”button” value=”reset” id=”reset”>
</div>
<div id=”div1″></div>
</div>
以下为黑暗中摸索的js:

//获得每个按钮

var mainDiv = document.getElementById(‘div1’)
,cWidth = document.getElementById(‘width’)
,cHeight = document.getElementById(‘height’)
,cColor = document.getElementById(‘backgroundcolor’)
,cHide = document.getElementById(‘hide’)
,cReset = document.getElementById(‘reset’);
window.onload = actFun;
//绑定每个按钮的点击事件
function actFun() {
cWidth.onclick = function(){
mainDiv.style.width=’150px’;
}
cHeight.onclick = function(){
mainDiv.style.height=’200px’;
}
cColor.onclick = function(){
mainDiv.style.backgroundColor=’#ff0000′;
}
cHide.onclick = function(){
mainDiv.style.display=’none’;
}
cReset.onclick = function(){
mainDiv.style.width=’100px’;
mainDiv.style.height=’100px’;
mainDiv.style.backgroundColor=’#000′;
mainDiv.style.display=’block’;
}
}

很显然,如果再添加五个要修改的样式,还得再给5个按钮绑定事件。处于还没入门,刚找到门缝的我,也只能写成这样。

于是,借鉴别人的代码,重新写了一遍:

//既然要给按钮绑定事件,并且做的同一件事都是修改样式,那么就把它写成一个函数,若再需要绑定事件,则无需再写。

function actFun(tar,pro,value){
tar.style[pro]=value;
}
window.onload = function(){
var getButton=document.getElementsByTagName(‘input’);//获得所有按钮
var getTar=document.getElementById(‘div1’);//获得要修改的元素
var proArr=[‘width’,’height’,’background’,’display’,’display’];//把要修改的属性放在数组
var tarArr=[‘150px’,’200px’,’#ff0000′,’none’,’block’];//修改的值放在一起
for(var i=0; i<getButton.length; i++){//将按钮循环一遍
getButton[i].index=i;
getButton[i].onclick=function(){
if(this.index == getButton.length-1){
getTar.style.cssText=””;//如果是最后一个按钮,即reset,就把样式清除掉
};
actFun(getTar,proArr[this.index],tarArr[this.index]);//调用函数
}
}
}

查看DEMO

虽然很简单,很基础,但偶还是得花更多的时间去理解和练习并且掌握好它(怀着一颗迷茫又敬畏的心),原因你懂的。

 



Leave a Reply

Your email address will not be published. Required fields are marked *

*