今天学习了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. 【Storm】Storm实战之频繁二项集挖掘

    一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...

  2. Sublime Text中安装插件来实现px与rem间的换算

    今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...

  3. crm维护踩坑记(一)

    目录 antd es6 Object.entries() Object.keys() Object.getOwnPropertyNames() 很神奇的用法!!! eslint 傻逼 其他 参考 an ...

  4. static关键字，引发的spring普通类获取spring的bean的思考

    在c++和java中static关键字用于修饰静态成员变量和成员函数 举例一个普通的javabean class AA { int a; static int b; geta/seta;//此处省略g ...

  5. javascript之数组快速排序

    快速排序思想其实还是挺简单的,分三步走: 1.在数组中找到基准点,其他数与之比较. 2.建立两个数组,小于基准点的数存储在左边数组,大于基准点的数存储在右边数组. 3.拼接数组,然后左边数组与右边数组 ...

  6. Java之戳中痛点 - （6）避免类型自动转换，例如两个整数相除得浮点数遇坑

    先来看一个例子: package com.test; public class calculate { /** * 光速30万公里/秒 */ public static final int LIGHT ...

  7. 关于移动端自动化测试-Appium的搭建

    web端我们常用的开源自动化用的是selenium,而移动端我们选择的是Appium,当然也可以使用monkey或者阿里的macaca,他们在理论上都使用了webdriver: 关于Appium环境的 ...

  8. java基础系列--集合类库（一）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7229478.html 1.概述 Java的集合类库很是丰富,囊括了大部分的常见数据结构形式 ...

  9. 初学安卓开发随笔之 Intent 用法

    首先,对于安卓开发,目前世界上流行的是使用的是Android studio 2.0 .(hh 学着来呗 书上说用这个,,) 今后就定一个计划 每天更新一个Android 随笔,增强一下自控力吧!!! ...

  10. 一份关于npm的新手指南

    Node.js使得在服务器端使用JavaScript编写应用程序成为可能.它是基于V8Javascript运行时并且使用C++编写的,所以它的速度很快.最初,它旨在作为应用程序的服务器环境,但是开发人 ...