完成效果：

演示地址：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. memcached几个easy被忽略但很实用的命令

    一.CAS和GETS Memcached从1.2.4版本号新增CAS(Check and Set)协议,用于处理同一个ITEM(key-value)被多个session更新改动时的数据一致性问题. 如 ...

  2. js解析json，js转换json成map,获取map的key,value

    json串格式 { "10.10.11.1": { "target_1": "34.2", "target_3": &q ...

  3. leetcodequestion_56 Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6],[8, ...

  4. HDU 4119Isabella's Message2011成都现场赛I题(字符串模拟)

    Isabella's Message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. ExtJS4.2学习(11)——高级组件之Grid

    大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...

  6. C++中虚函数的作用是什么？它应该怎么用呢？(转)

    虚函数联系到多态,多态联系到继承.所以本文中都是在继承层次上做文章.没了继承,什么都没得谈. 下面是对C++的虚函数这玩意儿的理解. 一, 什么是虚函数(如果不知道虚函数为何物,但有急切的想知道,那你 ...

  7. IO-File 文件 目录 基本操作 递归 遍历

    创建和删除 //创建文件 File file1 = new File("不存在的文件.txt");//注意,这一步并没有创建文件,只是把磁盘中的文件封装成了一个对象 System. ...

  8. Flexbox属性查询列表

    1.任何一个flexbox布局的第一步是需要创建一个flex容器.为此给元素设置display属性的值为flex.在Safari浏览器中,你依然需要添加前缀-webkit. .flexcontaine ...

  9. 初学Java ssh之Spring 第二篇

    上一篇我们成功搭建好了spring开发的环境,接下来一起看看spring有什么神奇的地方吧(本人也是新手,有不太对的地方希望大神给指出便于修改呢,谢谢大家). 之前听说spring是在对xml文件的应 ...

  10. oracle服务开机自启动

    1.修改oracle系统配置文件::/etc/oratab vi /etc/oratab orcl:/opt/oracle/product/10.2.0/db_1:Y 2.在 /etc/init.d/ ...