今天学习了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. Struts2配置拦截器自定义栈时抛异常：Unable to load configuration. - interceptor-ref - file:/D:/tomcat_install/webapps/crm/WEB-INF/classes/struts.xml

    代码如下: <interceptors>  <!-- 注册自定义拦截器 -->   <interceptor name="LoginInterceptor&qu ...

  2. Android Project和app中两个build.gradle配置的区别

    Android 开发也挺长时间了,从开始就使用的AndroidStudio开发,但是说下来其实自己对AS(AndroidStudio简称)还真的是不了解不深入.好吧,其实我只知道AS是一个相当强大的工 ...

  3. Android服务端的设计

    1.创建自己的MyServletContextListener.java: package yybwb; import java.net.ServerSocket; import javax.serv ...

  4. 求从n个数组任意选取一个元素的所有组合

    最近做项目碰到这个问题,如题从n个数组任意选取一个元素的所有组合.比如已知数组是[1, 3]; [2, 4]; [5]; 最后组合结果是[1, 2, 5]; [1, 4, 5];  [3, 2, 5] ...

  5. DotNetCore跨平台～问题～NETCoreAPP, Version=v1.0' compatible with one of the target runtimes: 'win10-x64

    回到目录 新建console项目之后,编译程序出现以下错误: Can not find runtime target for framework '.NETCoreAPP, Version=v1.0' ...

  6. A start job is running for xxx to stop

    CentOS7开机时,遇到这样的问题已经好多回了,查阅了许多这样的问题,总是没能找到自己想要的答案. 今天本来启动顺利,但是设置mysql.httpd服务开机启动之后,再次开机时又遇到这样的问题. 这 ...

  7. MyBatis的关联关系 一对一 一对多 多对多

    一对一示例 一个妻子对应一个丈夫 数据库表设计时 在妻子表中添加一个丈夫主键的作为外键 1 对应的JavaBean代码虽然在数据库里只有一方配置的外键,但是这个一对一是双向的关系. Husband实体 ...

  8. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  9. JavaScript 值类型和引用类型的初次研究

    今天遇到一个坑,具体的不多说,直接上代码 var a = [ [],[],[1,2,3] ] var b = ['颜色','大小','尺寸'] var arr = [] for(let i = 0; ...

  10. Xcode导出App一般问题及其解决方法(开发者协议变更及Bundle Id过期问题)

    Xcode导出App一般问题及其解决方法 问题一:开发者协议变更问题. 变更后打包会出现如下图A警告,此时点击 "visit developer website"进入Apple开发 ...