完成效果：

演示地址：http://codepen.io/anon/pen/jPbYWq

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>[js小练习]：DOM操作</title>

</head>

<body>

<div id="testField">

</div>

<div class="coverBg" id="coverBox">

	<div class="selBox">

	 <dl>

	 	<dt>选择颜色</dt>

	 	<dd id="red" class="commonEle">红</dd>

	    <dd id="green" class="commonEle">绿</dd>

	 	<dd id="blue" class="commonEle">蓝</dd>

	 </dl>	

	 <dl>

	 	<dt>定制尺寸</dt>

        <dd class="comEle">

        <label for="olength">输入长度值</label>

        <input type="text" id="olength" name="length">

        </dd>

        <dd class="comEle">

        <label for="owidth">输入宽度值</label>

        <input type="text" id="owidth" name="width">

        </dd>

	 </dl>

    <dl class="btn-list">

    	<dd><button class="btnEle" id="offBtn" >取消</button></dd>

    	<dd><button class="btnEle btn-save" id="saveBtn">保存</button></dd>

    </dl>

	</div>

</div>

</body>

</html>

　　

界面呈现：

	*{

		padding: 0;

		margin:0;

	}

	body{

		font-family: "microsoft yahei";

	}

   #testField{

   	width: 120px;

   	height: 120px;

   	background-color: #333;

   	position: absolute;

   	top: 0;

   	right: 0;

   	bottom: 0;

   	left: 0;

   	margin:auto;

   }

   .coverBg{ /*遮罩层*/

   	display: none;

   	position: fixed;

   	width: 100%;

   	height: 100%;

   	background-color: rgba(0,0,0,.4);

   }

   .selBox{

    width: 200px;

    height: 300px;

    padding:10px;

    font-size: 13px;

    border-radius:3px;

    background-color: rgba(255,255,255,.4);

    position: absolute;

    top: 0;

    right: -350px;

    bottom: 0;

    left: 0;

    margin:auto;

    box-shadow: 0 0 6px rgba(0,0,0,.3);

   }

   dl{

   	display: inline-block;

   }

   dl dt{

   	font-size: 13px;

   	font-weight: bold;

   	margin: 5px 0;

   	padding-bottom: 5px;

   	border-bottom: 1px solid #f7f7f7;

   }

   .commonEle{

       display:inline-block;

    　　width: 50px;

   	height: 50px;

   	border-radius: 25px;

   	text-align: center;

   	line-height: 50px;

   	color:#fff;

   	float: left;

   	margin:5px 8px;

   }

   #red{

   	background-color: red;

   }

   #green{

   	background-color: green;

   }

   #blue{

   	background-color: blue;

   }

   .comEle {

  margin: 10px;

}

.comEle input {

  margin: 5px 0;

  width: 100%;

  height: 24px;

  border: 1px solid #999;

  border-radius: 3px;

  box-shadow: inset 0 0 3px rgba(0,0,0,.3);

}

.btn-list dd{

	float: left;

}

.btnEle {

  padding: 5px 25px;

  border: 0;

  outline: 0;

  box-shadow: 0 1px 2px rgba(0,0,0,.075);

  border-radius: 2px;

  margin: 5px 11px;

  color: #666;

}

.btn-save{

  background-image: -webkit-gradient(linear, left top, left bottom, from(#e3262e), to(#ab171e));

  background-image: -webkit-linear-gradient(#e3262e, #ab171e);

  background-image: linear-gradient(#e3262e, #ab171e);

  text-shadow: 0 -1px rgba(0, 0, 0, 0.11);

  color: #fff;

}

　

JS部分：

var oField=document.getElementById('testField');

var oCover=document.getElementById('coverBox');

var oRed=document.getElementById('red');

var oGreen=document.getElementById('green');

var oBlue=document.getElementById('blue');

var olength=document.getElementById('olength');

var owidth=document.getElementById('owidth');

var oOffBtn=document.getElementById('offBtn');

var oSaveBtn=document.getElementById('saveBtn');

olength.oninput=function(){

var h_value=olength.value +"px";

oField.style.height=h_value;

}

owidth.oninput=function(){

var w_value=owidth.value +"px";

oField.style.width=w_value;

}

oField.onclick=function(){

oCover.style.display="block";

}

oRed.onclick=function(){

	oField.style.backgroundColor="red";

}

oGreen.onclick=function(){

	oField.style.backgroundColor="green";

}

oBlue.onclick=function(){

	oField.style.backgroundColor="blue";

}

oOffBtn.onclick=function(){

	oCover.style.display="none";

	oField.style.height="120px";

	oField.style.width="120px";

	oField.style.backgroundColor="#333";

	//取消的时候清空input数值

        olength.value='';

        owidth.value='';

}

oSaveBtn.onclick=function(){

	oCover.style.display="none";

	//保存的时候清空input数值

	olength.value='';

        owidth.value='';

}

　　

js练习【DOM操作】的更多相关文章

  1. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  2. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  3. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  5. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  6. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  7. 5月16日上课笔记-js中DOM操作

    一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...

  8. js函数 DOM操作

    回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...

  9. 总结js常用的dom操作（js的dom操作API）

    转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...

  10. js常用DOM操作

    在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...

随机推荐

  1. (step4.3.1) hdu 1010(Tempter of the Bone——DFS)

    题目大意:输入三个整数N,M,T.在接下来的N行.M列会有一系列的字符.其中S表示起点,D表示终点. .表示路 . X表示墙...问狗能有在T秒时到达D.如果能输出YES, 否则输出NO 解题思路:D ...

  2. resin config 中文(resin.xml)

    <!-- - Resin 3.1 配置文件. --> <resin xmlns="http://caucho.com/ns/resin" xmlns:resin= ...

  3. Android RatingBar自定义替换系统图片

    1.自定义替换提醒☆图片,准备两个图片添加到系统中去:如下:        在drewable下定义一个图片资源ratingbar_drawable.xml 1 2 3 4 5 6 7 8 9 10 ...

  4. Linux驱动设备中的并发控制

    一.基本概念 二.中断屏蔽 三.原子操作 四.自旋锁 五.信号量 六.互斥体 七.自旋锁与信号量的比较 Linux设备驱动中必须解决的一个问题是多个进程对共享资源的并发访问,并发的访问会导致竞态,即使 ...

  5. django: db - admin

    本讲演示简单使用 Django Admin 功能. 一,修改 settings.py,添加 admin 应用: INSTALLED_APPS = ( 'django.contrib.auth', 'd ...

  6. Ajax (jquery)实现智能提示搜索框（in Django）

    搜索框输入搜索名字,从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下:          html文件: <!DOCTYPE html> <ht ...

  7. hibernate 核心总结 （面试）

    1:1(类与类之间) husband----wife 外键关联: a)单向@OneToOne b)双向@OneToOne, mappedby="husband" --------- ...

  8. map的使用方法

    package cn.stat.p8.map.demo; import java.util.Collection; import java.util.HashMap; import java.util ...

  9. MySql多条SQL语句的批量处理

    pstmt= conn.prepareStatement(sql); for(int i=0;i<500;i++) { //准备sql语句 pstmt.setString(1, "tt ...

  10. 修改Servlet模板

    1.找到jar文件 查看MyEclipse根目录下的myeclipse.ini,找到Common文件夹的位置,打开文件夹..\Common\plugins 找到文件 com.genuitec.ecli ...