今天学习了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>

运行效果：

第4天：JS入门-给div设置宽高背景色的更多相关文章

  1. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  2. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  3. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  4. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  5. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  6. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

  7. a标签什么时候可以设置宽高

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了

  8. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  9. transform的妙用---实现div不定宽高垂直水平居中

    transform的兼容性 transform的兼容性还是比较乐观的.IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换. 谷歌和Safari支持代替的-webkit- ...

随机推荐

  1. Microsoft office2010页码设置----论文、课程设计报告格式

    思想:将目录页(含目录页)与目录页以下的页面用分隔符分隔开,单独设置目录页以下的页面页码,删除目录页(含目录)以前的页码. 1.在目录页页面内容最下面一行插入分隔符,实现与下面页面分隔开的目的. 页面 ...

  2. 西电2017ACM网络赛

    #include<bits/stdc++.h> using namespace std; typedef long long LL; #define ms(a,x) memset(a,x, ...

  3. 【.net 深呼吸】自己动手来写应用程序设置类

    在开始装逼之前,老周先说明一件事.有人说老周写的东西太简单了,能不能写点复杂点.这问题就来了,要写什么东西才叫“复杂”?最重要的是,写得太复杂了,一方面很多朋友看不懂,另一方面,连老周自己也不知道怎么 ...

  4. （转）Centos7 Nginx安装

    场景:工作中使用的suse,因为系统可可查资料太少,且系统中一些功能的确实,导致很多集群中功能无法顺利测试通过,在Centos上面进行测试,能够更快的熟悉项目的架构过程! 1 安装准备 首先由于ngi ...

  5. SpringBoot系列一（入门，ORM，Transaction,log4j2等）

    今天写篇springboot的博客,主要介绍一下springboot搭建以及一些整合. 首先介绍springboot搭建,我今天选择Maven,想用Gradle搭建的就自己百度一下吧,访问" ...

  6. 配置LAMP实现WordPress

    环境说明: 在同一台主机上实现LAMP(Linux + Apache + MariaDB + PHP) CentOS 7.3.Apache 2.4.6.MariaDB 5.5.52.PHP 5.4.1 ...

  7. Linux常用命令和常见问题解决<------>第一章

    查看文件下面所有的隐藏目录:ls -al ~ ls -al ~ls -a -l ~可以发现三条命令执行结果是一致的,原因:因为ls为命令 后面的参数要以空格来区分,不论几个空格 shell都会视为一体 ...

  8. CSharpGL(43)环境映射(Environment Mapping)-天空盒(Skybox)反射(Reflection)和折射(Refraction)

    CSharpGL(43)环境映射(Environment Mapping)-天空盒(Skybox)反射(Reflection)和折射(Refraction) 开始 如图所示,本文围绕GLSL里的sam ...

  9. 【整理】01. Fiddler 杂记

    抓手机包步骤: Tools -- Fiddler Options -- Connections (默认)Fiddler listens on port:8888 (勾选)Allow remote co ...

  10. PyCharm中光标变粗的解决方法

    pycharm中光标变粗,如下: 原因:光标进入了改写状态. 解决方法:按一下键盘中的Insert键就好了.