<!--
*
*
* @Author: wyy
* @Date: 2018-04-15 17:36:35
* @Email: 2752154874@qq.com
* @Last Modified by: wyy
* @Last Modified time: 2018-05-04 17:28:11
*
*
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-dem-3</title>
<meta name="viewport" content="device-width">
<meta name="decription" content="a js test">
<style>
body {
background: #e9feff7a;
}
.set {
font-size: 18px;
margin-bottom: 10px;
}
.default {
width: 100px;
height: 100px;
border-style: solid;
background: #fff;
}
.set_btn {
background-color: red;
color:white;
}
.set_menu {
width: 270px;
height: auto;
margin: 80px 600px;
background-color: #c6c5c530;
display: none;
}
.small_bg {
width: 270px;
height: 38px;
margin-left: 13px;
}
p {
float: left;
margin-top: 10px;

}
.set_menu ul {
list-style-type: none;
}
.small_bg li {
float: left;
padding: 10px 8px;
}
input {
border: none;
vertical-align: middle;
}
input#red {
background: #d95d69;
color: white;
}
input#yellow {
background: #d7cc51;
color: white;
}
input#blue {
background: #4884dd;
color: white;
}
.num_btn {
border-style: groove;
}
.s_btn {
background-color: blue;
color: white;
margin-left: 15px;
}
</style>
</head>
<body id="all">
<div class="set">请为下面的Div设置样式
<input type="button" class="set_btn" id="set" value="设置"></div>
<div class="default" id="def"></div>
<div class="set_menu" id="menu">
<div class="small_bg">
<p>请选择背景颜色:</p>
<ul>
<li><input type="button" value="红" id="red"></li>
<li><input type="button" value="黄" id="yellow"></li>
<li><input type="button" value="蓝" id="blue"></li>
</ul>
</div>
<div class="small_bg">
<p>请选择宽(px):</p>
<ul>
<li><input type="button" class="num_btn" value="200" id="w2"></li>
<li><input type="button" class="num_btn" value="300" id="w3"></li>
<li><input type="button" class="num_btn" value="400" id="w4"></li>
</ul>
</div>
<div class="small_bg">
<p>请选择高(px):</p>
<ul>
<li><input type="button" class="num_btn" value="200" id="h2"></li>
<li><input type="button" class="num_btn" value="300" id="h3"></li>
<li><input type="button" class="num_btn" value="400" id="h4"></li>
</ul>
</div>
<div class="small_bg">
<ul>
<li><input class="s_btn" type="button" value="恢复" id="recover"></li>
<li><input class="s_btn" type="button" value="确定" id="ok"></li>
</ul>
</div>
</div>
</body>
<script>

window.onload = function(){
var oSetbtn = document.getElementById("set");
var oSetmenu = document.getElementById("menu");
var oDef = document.getElementById("def");
var oBackground = document.getElementById("all");
var oRed = document.getElementById("red");
var oYellow = document.getElementById("yellow");
var oBlue = document.getElementById("blue");
var oSetok = document.getElementById("ok");
var oRecover = document.getElementById("recover");
var oW2 = document.getElementById("w2");
var oW3 = document.getElementById("w3");
var oW4 = document.getElementById("w4");
var oH2 = document.getElementById("h2");
var oH3 = document.getElementById("h3");
var oH4 = document.getElementById("h4");

oSetbtn.onclick=function (){
oSetmenu.style.display = 'block';
oBackground.style.background = '#ebeabe4d';
}
oRed.onclick=function (){
oRed.style.background = 'red';
oDef.style.background = 'red';
oYellow.style.background = '#d7cc51';
oBlue.style.background = '#4884dd';
}
oYellow.onclick=function (){
oYellow.style.background = 'yellow';
oDef.style.background = 'yellow';
oRed.style.background = '#d95d69';
oBlue.style.background = '#4884dd';
}
oBlue.onclick=function (){
oBlue.style.background = 'blue';
oDef.style.background = 'blue';
oRed.style.background = '#d95d69';
oYellow.style.background = '#d7cc51';
}
oW2.onclick=function (){
oDef.style.width = '200px';
}
oW3.onclick=function (){
oDef.style.width = '300px';
}
oW4.onclick=function (){
oDef.style.width = '400px';
}
oH2.onclick=function (){
oDef.style.height = '200px';
}

oH3.onclick=function (){
oDef.style.height = '300px';
}
oH4.onclick=function (){
oDef.style.height = '400px';
}
oRecover.onclick=function(){
oDef.style.width = '100px';
oDef.style.height = '100px';
oDef.style.background = '#fff';
}
oSetok.onclick=function (){
oSetmenu.style.display = 'none';
}
}

</script>
</html>

【妙味课堂】JS热身课后习题的更多相关文章

  1. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  2. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  3. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  4. 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  5. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  6. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  7. 妙味远程课堂-JS热身运动-上

    希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...

  8. 网易云课堂--妙味 《js基础课程》

    ==小例子1   ==JS中允许将"." 替换成 “[ ]” document.getElementById('btn1') 写成 document['etElementById' ...

  9. 妙味课堂——HTML+CSS(第二课)

    常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...

随机推荐

  1. 广州商学院16级软工一班&二班-第二次作业成绩

    作业地址 https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 https://edu.cnblogs.com/campus/gzc ...

  2. iOStextField/textView在输入时限制emoji表情的输入

    https://www.jianshu.com/p/5227e6aab4d4 2017.02.27 13:08* 字数 146 阅读 6109评论 6喜欢 14 又遇到输入框输入表情的情况了,之前写了 ...

  3. 每周分享之JS数组的使用

    数组,一堆数字归为一组,就是一个数组,一堆对象放在一个组里,也是一个数组,概念很容易懂,说白了就是一个有限集合. JS数组的语法无法两种,插入和移除(语法自行科普).用处挺常见的,既然数组是一个集合, ...

  4. Java基础之一反射

    反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码))   一.反射的概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够 ...

  5. Python classmethod 修饰符

    描述 classmethod修饰符对应的函数不需要实例化,不需要self参数,但第一个参数需要是表示自身类的cls参数,可以调用类的属性,类的方法,实例化对象等. 语法 classmethod语法: ...

  6. 异常：fatal: unable to access 'https://git.oschina.net/pcmpcs/library.git/': Could not resolve host

    git  fork项目时出现的异常. 原因: 我以前用的是ssh地址做的远程通信地址,而这次是用的是https,因为很久没用,所以忘记了以前是用ssh的了.解决方案一:复制ssh协议的地址,然后再关联 ...

  7. C++实现算法常用的STL---整理

    algorithm min(a,b)和max(a,b) #include<iostream> #include<algorithm> using namespace std; ...

  8. java对象的四种引用：强引用、软引用、弱引用和虚引用

    在JDK1.2之前,创建的对象只有在处于可触及(reachable)的状态下,才能被程序使用.也就是说,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.垃圾回收器一旦发现这些无用对象,就会对 ...

  9. [转帖]Docker容器CPU、memory资源限制

    Docker容器CPU.memory资源限制 https://www.cnblogs.com/zhuochong/p/9728383.html 处理事项内容等 这一块内容感觉 不清楚.. 背景 在使用 ...

  10. 头文件带和不带.h的区别

    所有C++标准库的头文件都是没有.h结尾的.这么做是为了区分,C标准库的头文件和C++标准库的头文件.比如最具代表性的: #include <string.h> // C 标准库头文件,包 ...