html div控制,1 控制DIV的属性.html

控制div属性

#outer{width:500px;margin:0 auto;padding:0;text-align:center;}

#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}

var changeStyle = function (elem, attr, value)

{

elem.style[attr] = value

};

window.onload = function ()

{

var oBtn = document.getElementsByTagName("input");

var oDiv = document.getElementById("div1");

var oAtt = ["width","height","background","display","display"];

var oVal = ["200px","200px","red","none","block"];

for (var i = 0; i < oBtn.length; i++)

{

oBtn[i].index = i;

oBtn[i].onclick = function ()

{

this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

changeStyle(oDiv, oAtt[this.index], oVal[this.index])

}

}

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史