<!--
*
*
* @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. 【C#复习总结】细说泛型委托

    1 前言 本系列会将[委托] [匿名方法][Lambda表达式] [泛型委托] [表达式树] [事件]等基础知识总结一下.(本人小白一枚,有错误的地方希望大佬指正) 系类1:细说委托 系类2:细说匿名 ...

  2. 腾讯 Omi 5.0 发布 - Web 前端 MVVM 王者归来，mappingjs 强力加持

    写在前面 腾讯 Omi 框架正式发布 5.0,依然专注于 View,但是对 MVVM 架构更加友好的集成,彻底分离视图与业务逻辑的架构. 你可以通过 omi-cli 快速体验 MVVM: $ npm ...

  3. python2.x版本与python3.x版本的区别以及运算符

    python2.x中: 重复代码,语言不统一,不支持中文 py2中除法获取的都是整形 py2中有long(长整形) print 可以加括号也可以不加括号 range 在py2中打印的结果是列表 py2 ...

  4. 打开指定测试App的指定Activity

    那究竟应该如何让appium去自动找到指定的APP和指定的Activity呢?想要打开指定的App,需要知道App的包名,同样想要打开指定Activity也需要知道其名,如何获取? 1.问公司的开发人 ...

  5. javascript重定向页面并用post方法传递消息

    javascript中重定向页面得方法很多,同时能传递消息的也不少:但可用post方法传递的我只找到两种: 第一种方法:用document.write在 JavaScript函数中,用document ...

  6. hadoop和java 配置环境变量的的tar

    第一步:打开工具上传tar包 如下图 第二步:在文件路径下查看是否上传成功 第三步:解压tar包               tar -zxvf hadoop.2.6.5.tar.gz 第四步:配置环 ...

  7. semantic-ui 图片

    1.基础样式 方式一:因为图片是使用img标签,所以直接将class加载img标签中即可.不过要注意的是,class中要指定是ui image. 方式二:使用一个span或者div将img标签包裹,然 ...

  8. yum 命令

    yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...

  9. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

  10. 【学亮IT手记】jQuery text()/html()回调函数实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...