第4天：JS入门-给div设置宽高背景色
今天学习了js入门课程，听的不多，做了个小练习，给div设置宽高、背景色。一点点都是进步。核心代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS入门_设置div宽、高、背景色</title> <style> *{ margin:0; padding:0; } h2{ float: left; } #span1{ width:100px; height:40px; background: red; text-align: center; line-height: 40px; display: inline-block; } #box{ width:100px; height:100px; border: 2px solid #000; } #con{ width:300px; height:200px; background: #fff; border: 10px solid #d2d2d2; margin: 0 auto; padding: 20px; display: none; position: fixed; top: 300px; right:300px; z-index: 2; } #red,#yellow,#blue,#width1,#width2,#width3,#height1,#height2,#height3{ display:inline-block; width:36px; height:33px; text-align: center; line-height: 33px; margin: 5px; } #width1,#width2,#width3,#height1,#height2,#height3{ background: #f1f1f1; border: 1px solid #000; } #red{ background: red; } #yellow{ background: yellow; } #blue{ background: blue; } .btn1,.btn2{ width:60px; height:30px; color: #fff; background: blue; border:1px solid #02f; border-radius: 2px; margin: 10px; } </style> <script> window.onload=function(){ oBody=document.getElementById('body'); oSpan1=document.getElementById('span1'); oCon=document.getElementById('con'); oBox=document.getElementById('box'); oRed=document.getElementById('red'); oYellow=document.getElementById('yellow'); oBlue=document.getElementById('blue'); oWidth1=document.getElementById('width1'); oWidth2=document.getElementById('width2'); oWidth3=document.getElementById('width3'); oHeight1=document.getElementById('height1'); oHeight2=document.getElementById('height2'); oHeight3=document.getElementById('height3'); oSpan1.onclick=function(){ oCon.style.display='block'; oBody.style.background='#c1c1c1';
}
oRed.onclick=function(){ box.style.background='red'; } oYellow.onclick=function(){ box.style.background='yellow'; } oBlue.onclick=function(){ box.style.background='blue'; } oWidth1.onclick=function(){ box.style.width='200px'; } oWidth2.onclick=function(){ box.style.width='300px'; } oWidth3.onclick=function(){ box.style.width='400px'; } oHeight1.onclick=function(){ box.style.height='200px'; } oHeight2.onclick=function(){ box.style.height='300px'; }
oHeight3.onclick=function(){ box.style.height='400px'; }
} </script> </head> <body id="body"> <div id="top"> <h2>请为下面的DIV设置样式：</h2> <span id="span1">点击设置</span> </div> <div id="box"></div> <div id="con"> <p>请选择背景色：<span id="red">红</span><span id="yellow">黄</span><span id="blue">蓝</span></p> <p>请选择宽(px)：<span id="width1">200</span><span id="width2">300</span><span id="width3">400</span></p> <p>请选择高(px)：<span id="height1">200</span><span id="height2">300</span><span id="height3">400</span></p> <button class="btn1">恢复</button> <button class="btn2">确定</button> </div>
</body> </html>
运行效果：
腾讯云开发者
