简单JS控制DIV样式例子

来源：互联网发布：app软件著作权编辑：程序博客网时间：2024/06/04 19:03
<!doctype html><html><head><meta charset="utf-8"><title></title><style>#box{width: 100px;max-width: 800px;height: 100px;max-height: 400px;background-color: #000;margin: 0 auto;}#btn{text-align: center;margin: 20px 0;}</style></head><body><div id="btn"><button id="setWidth">变宽</button><button id="setHeight">变高</button><button id="setColor">变色</button><button id="disHidden">显示/隐藏</button><button id="restset">复原</button></div><div id="box"></div><script>var setWidth=document.getElementById("setWidth")var setHeight=document.getElementById("setHeight")var setColor=document.getElementById("setColor")var disHidden=document.getElementById("disHidden")var restset=document.getElementById("restset")var box=document.getElementById("box")//↑获取各按钮及boxsetWidth.onclick=function(){var w=box.offsetWidth;box.style.width=w*2+"px";}setHeight.onclick=function(){var h=box.offsetHeight;box.style.height=h*2+"px";}var colorArr=['red','pink','yellow','blue','aqun','gold','gray']setColor.onclick=function(){var color=setColor.style.backgroundColor;var i=Math.floor(Math.random()*7);box.style.backgroundColor=colorArr[i];}disHidden.onclick=function(){if(box.style.display=="none"){box.style.display="block"}else{box.style.display="none"}}restset.onclick=function(){    var message=confirm("你确定要重置所有设置么？");    if(message==true){    box.removeAttribute('style');}}</script></body></html>
运行后如下图：
0 0