今天学习了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. 基于Node.js的微信JS-SDK后端接口实现

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...

  2. Python爬虫从入门到放弃（十二）之 Scrapy框架的架构和原理

    这一篇文章主要是为了对scrapy框架的工作流程以及各个组件功能的介绍 Scrapy目前已经可以很好的在python3上运行Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是 ...

  3. 7个原因告诉你为什么要选择一个“多模型”的数据库？-ArangoDB

    ArangoDB 是一个开源的分布式原生多模型数据库 (Apache 2 license). 其理念是:利用一个引擎,一个 query 语法,一项数据库技术,以及多个数据模型,来最大力度满足项目的灵活 ...

  4. [AOP系列]Autofac+Castle实现AOP事务

    一.前言 最近公司新项目,需要搭架构进行开发,其中需要保证事务的一致性,经过一番查找,发现很多博文都是通过Spring.Net.Unity.PostSharp.Castle Windsor这些方式实现 ...

  5. hdu_5810:Balls and Boxes（期望）

    这题似乎就是纯概率论.. E(V)=D(X_i)=npq (p=1/m,p+q=1) #include<bits/stdc++.h> using namespace std; typede ...

  6. Spring MVC的实现原理

    Spring提供了DispatcherServlet,这个类不仅负责实现请求转发,还负责启动一个WebApplicationContext容器. 按照Spring一贯的IoC哲学,所有的Control ...

  7. (转)java反射机制及简单工厂模式

    第一步,定义一个接口类 package factory.face; /** * 接口,为了保证返回的对象可以统一用 Product接受 * @author Administrator */ publi ...

  8. ML（2）--感知机

    案例银行办信用卡--获得感知机 我们到银行办信用卡时,银行并不是直接就给你办卡的,而是会根据你的一些个人信息.消费信息.个人信誉等指标综合考虑后,才会决定是否给你办卡(不像现在银行办信用卡有点随意). ...

  9. 【设计模式】Bridge模式（桥接模式）

    最近的一次面试中,被问到桥接模式,以前呢并没有很仔细的研究过这个设计模式,借此机会剖析一下. 先给出自己对这个模式理解后的源码: interface A{ void methodA(); } inte ...

  10. OPNET中FIN，FOUT以及FRET的作用 分类： opnet 2014-05-12 16:07 144人阅读 评论(0) 收藏

    为了使一个用户定义的函数被执行,该函数必须与一个特殊的堆栈跟踪代码相连.堆栈跟踪技术靠在函数的入口点和出口点插入预处理器宏指令完成(一个函数只有一个入口点,但可以有多个出口点(由C语言的return声 ...