完成效果：

演示地址：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. 怎么给iOS项目打包

    1  首先要选中项目中的真机測试,不要模拟器 ,然后从上边的菜单条中找product watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29tZXJhaW43 ...

  2. uploadify上传控件中文的乱码解决办法

    uploadify上传控件中文的乱码解决办法 网站用的gb2312的编码,用uploadify上传控件上传中文时在IE能部分成功,FF,Chrome则完全失败,查找了一天原因,结果发现是页面编码问题, ...

  3. OC基础 NSData

    OC基础 NSData 1.NSString转NSData //NSString转NSData NSString *string = @"abcd12345"; NSData *d ...

  4. 武汉科技大学ACM ：1001: A + B Problem

    Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to e ...

  5. Sudoku Killer

    算法:深搜 自从2006年3月10日至11日的首届数独世界锦标赛以后,数独这项游戏越来越受到人们的喜爱和重视. 据说,在2008北京奥运会上,会将数独列为一个单独的项目进行比赛,冠军将有可能获得的一份 ...

  6. QQ在线客服

    css代码: .float0831 { POSITION: fixed; TOP: 180px; RIGHT: 1px; _position: absolute } .float0831 A { CO ...

  7. js获取下拉列表(select)选中项的值和文本

    获取下拉列表选中项的值和文本(select) <html> <head> <meta charset="utf-8"/> <title&g ...

  8. 深入浅出scanf、getcha、gets、cin函数

    转:问题描述一:(分析scanf()和getchar()读取字符) scanf(), getchar()等都是标准输入函数,一般人都会觉得这几个函数非常简单,没什么特殊的.但是有时候却就是因为使用这些 ...

  9. JNI错误记录--JNI程序调用本地库时JVM崩溃

    什么是JNI内存泄露,基本的避免方法 : http://www.ibm.com/developerworks/cn/java/j-lo-jnileak/ 最近的课题中需要用到Spark,同组同学负责的 ...

  10. 《VIM-Adventures攻略》 LEVEL 4、5

    本文已转至http://cn.abnerchou.me/2014/03/10/46d23509/ 上一篇文章忘记说明文本编辑器的模式: 所有文本编辑器都至少有两种模式,编辑模式和控制模式.编辑模式就是 ...