2018-05-17

js小案例-----控制Div属性

控制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(vari =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])    }  }

};

作者：奇妙雨

链接：//www.greatytc.com/p/981979d893b8

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。