第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>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端侠2.0

重新认识visibility 原

原先只是记住了display:none不点位,visibility:hidden要占位显示。

6920
来自专栏Ryan Miao

博客园主题修改中用到的css属性

样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. ...

33070
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

12830
来自专栏web

关于border边框重叠颜色设置问题

23140
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

63660
来自专栏小樱的经验随笔

HTML/CSS/JavaScript学习笔记【持续更新】

HTML <font> 标签 定义和用法 <font> 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 <font size="3"...

367100
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

15410
来自专栏十月梦想

bootstrap轮播图实现

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度,1000=1m,单位是毫秒

20030
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

11720
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

17720

扫码关注云+社区

领取腾讯云代金券