<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
font-family: "微软雅黑";
}
.btn{
padding: 6px 8px;
outline: none;
border: 1px solid #fff;
background: blueviolet;
color: #fff;
cursor: pointer;
}
#div{
width: 100px;
height: 100px;
border: 1px solid #333;
}
.mask{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
display: none;

}
.mask_dialog{
width: 300px;
height: 300px;
background: #fff;
margin: 0 auto;
padding: 20px;
}
.item1{
margin-bottom: 10px;
}
a{
text-decoration: none;
color: #333333;
display: inline-block;
width: 46px;
height: 46px;
border: 1px solid #333333;
text-align: center;
line-height: 46px;
}
a:hover{
background: orange;
}
</style>
</head>
<body>
<h3>
请为下面的DIV添加样式
<button class="btn" id="btn">按钮</button>
</h3>
<div id="div">

</div>

<div class="mask" id="mask">
<div class="mask_dialog">
<div class="item1">
<span>请选择颜色(px)</span>
<a href="javascript:;">红</a>
<a href="javascript:;">蓝</a>
<a href="javascript:;">绿</a>
</div>
<div class="item1">
<span>请选择宽度(px)</span>
<a href="javascript:;">200</a>
<a href="javascript:;">300</a>
<a href="javascript:;">400</a>
</div>
<div class="item1">
<span>请选择高度(px)</span>
<a href="javascript:;">200</a>
<a href="javascript:;">300</a>
<a href="javascript:;">400</a>
</div>

<div class="mask_footer">
<button class="btn" id="cancel">取消</button>
<button class="btn" id="comfire">确定</button>
</div>
</div>


</div>
<script>
var arr = ["red","blue","green","200","300","400","200","300","400"]
var oBtn = document.getElementById("btn")
var oMask = document.getElementById("mask")
var oA = oMask.getElementsByTagName("a")
var oDiv = document.getElementById("div")
var oCancel = document.getElementById("cancel")
var oComfire = document.getElementById("comfire")


oBtn.onclick = function(){
oMask.style.display = "block"
}

for (var i=0;i<oA.length;i++) {
oA[i].index = i

oA[i].onclick = function(){
// alert(this.index)
if(this.index>=0&&this.index<=2){
oDiv.style.background = arr[this.index]
}else if(this.index>=3 && this.index<=5){
oDiv.style.width = arr[this.index]+"px"
}else{
oDiv.style.height = arr[this.index]+"px"
}
}
}
oCancel.onclick = function(){
oDiv.style.background = "#fff"
oDiv.style.width = 100+"px"
oDiv.style.height = 100+"px"
oMask.style.display = "none"
}
oComfire.onclick = function(){
oMask.style.display = "none"
}


</script>


</body>
</html>

js五道经典练习题--第一道的更多相关文章

  1. js五道经典练习题--第五道成绩列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. js五道经典练习题--第四道qq好友列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js五道经典练习题--第三道实现购物车功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. js五道经典练习题--第二道仿qq聊天框

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. Python经典练习题1：一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？

    Python经典练习题 网上能够搜得到的答案为: for i in range(1,85): if 168 % i == 0: j = 168 / i; if i > j and (i + j) ...

  6. 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数

    目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...

  7. MYSQL经典练习题，熟悉DQL

    MYSQL经典练习题 (本练习题可让你熟悉DQL,快速的上手DQL) 首先,先在数据库中建立基本数据库以及表项: DROP DATABASE IF EXISTS `test`; CREATE DATA ...

  8. 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i

    闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...

  9. 用9种办法解决 JS 闭包经典面试题之 for 循环取 i

    2017-01-06 Tomson JavaScript 转自 https://segmentfault.com/a/1190000003818163 闭包 1.正确的说,应该是指一个闭包域,每当声明 ...

随机推荐

  1. Nginx 的 docker 部署

    1.输入命令 docker pull nginx:1.15 拉取 nginx 的镜像: 2.使用 docker images 查看拉取到的镜像信息: 3.在主机上创建用于映射的目录 mkdir -p ...

  2. KeyPress键盘按键ASCII值对应表

    vbKeyLButton 1 鼠标左键  vbKeyRButton 2 鼠标右键  vbKeyCancel 3 CANCEL 键  vbKeyMButton 4 鼠标中键  vbKeyBack 8 B ...

  3. PostThreadMessage

    PostThreadMessage是一个Windows API函数.其功能是将一个队列消息放入(寄送)到指定线程的消息队列里,不等待线程处理消息就返回.

  4. Linux 双网关（电信与联通）

    经常有这种需求,一台Linux服务器配置电信IP和网通IP,默认情况下,后启动的网卡的网关生效.南电信北网通,配置电信和网通IP,无非是为了减少网络延时,使电信用户的请求响应在电信网络中传输,网通用户 ...

  5. Spring ConversionService 类型转换（一）Converter

    Spring ConversionService 类型转换(一)Converter Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.h ...

  6. 最新Dashboard设计实例、技巧和资源集锦，视觉和功能两不误，妥妥的！

    Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等).但,此类设计的最终目都是力求以最直观.最简洁的方式呈现各种信息和 ...

  7. 分布式版本控制工具：git与Mercurial（zz）

    分布式版本控制工具:git与Mercurial [收藏此页] [打印]   作者:cyfdecyf  2007-12-26 内容导航: 第1页   [IT168 技术文档]    说到版本控制工具,很 ...

  8. (转)用webbrowser做的网站登陆程序，如何获取cookie并且保存在程序中 (IE8有效) ，用途嘛，你懂的。

    今天帮朋友做了个工具,用webbrowser做的,用户使用用户名密码登陆网站后,需要在后台下载和分析一些页面. 分析页面使用的是htmlparser .net版 里面唯一需要解决的问题是,登陆后的co ...

  9. canvas 实现圆环效果

    var race = document.getElementById('race'); var cxt = race.getContext('2d'); var ang = 0; var speed ...

  10. 关于oracle的锁表解决session marked for kill

    oracle 使用的过程中,有时候会遇到锁表的情况,数据库增.删.改.查都是会锁表的,但是锁的类型会不同, 大多是行锁,部分会是表锁. 在oracle运行中,一直是有表在锁的,只不过很快一个操作结束, ...