今天学习了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. JS操作数组常用的方法

    JS操作Array对象的方法 concat(arr1,arr2,...):连接数组indexOf(value):返回数组中value的第一个索引join(separator):将数组中所有的元素连接由 ...

  2. C++学习（五）入门篇——基本类型

    面向对象编程的本质是设计并扩展自己的数据类型,让类型和数据匹配. 内置C++分成两种类型:基本类型和复合类型 1.简单变量 程序需要存储信息时,必须记录三个基本属性 (1)信息将存储在哪 (2)要存储 ...

  3. java webservice简单的例子

    开发环境:eclipse .jdk 创建服务端 demo-webservice 创建类 HelloService.java package com.hundsun.ws.service; import ...

  4. Exception in thread "http-bio-8080-exec-2" java.lang.OutOfMemoryError: PermGen space[解决方案]

  5. （转）Linux开机启动(bootstrap)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是按了开机键,就看到屏幕上的进度条或者一行行的输 ...

  6. 【Owin 学习系列】1. 第一个 Owin 程序

    IIS 中的 Owin 在 IIS 里面部署 Owin,既能得到 Owin 管道模型的灵活性和模块特性,也能很好地利用 IIS 成熟的配置,Owin 程序将会跑在 ASP.NET request 的管 ...

  7. 认识sass和webstrom的sass配置

    认识sass和webstrom的sass配置 我纳闷啊!电脑死机,我刚才编写的内容全没了. 呵呵! 一.sass的使用 1.首先要到官网下载个稳定的ruby版本,因为sass运行是需要ruby环境 它 ...

  8. 暑假集训D11总结

    %dalao 今天某学长来讲一个极其高深的数据结构——线段树(woc哪里高深了),然而并没有时间整理笔记= =,所以明天在扔笔记咯= = 考试 今天考试,一看数据范围,woc暴力分给的真足,然后高高兴 ...

  9. 43. leetcode 459. Repeated Substring Pattern

    459. Repeated Substring Pattern Given a non-empty string check if it can be constructed by taking a ...

  10. OOP in Javascript

    写了几篇Vue入门的内容了,今天写点其它的放松一下,简单讲讲javascript中的面相对象. 在面向对象的语言中,都有类的概念,当然es6中开始javascript中也有类的概念了,这里以es5为基 ...