完成效果：

演示地址：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. QT中关于窗口全屏显示与退出全屏的实现

    近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...

  2. [转］getResource()和getResourceAsStream以及路径问题

    原文链接:http://blog.sina.com.cn/s/blog_4b5bc0110100g22w.html 用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉 ...

  3. Xshell 4的上传与下载

    http://blog.csdn.net/lioncode/article/details/7921525

  4. mybatis之特殊查询

    在mybatis查询的过程中,某个字段是经过计算得到的,这时,在设计数据表的时候,就不 必在增加此对应的字段 那么,在查询的时候,页面有需要展示这个字段时,怎么办呢? 举个例子: 在查询微信团商品时, ...

  5. OD: First Step

    开始学习 0Day 了,前进了小小一步:<0Day 安全:软件漏洞分析艺术>第一篇末尾的 crack_me 实验成功了. 纪念一下. 几个概念: PE:    Portable Execu ...

  6. 自动生成 Lambda查询和排序，从些查询列表so easy

    如下图查询页面,跟据不同条件动态生成lambda的Where条件和OrderBy,如果要增加或调整查询,只用改前台HTML即可,不用改后台代码 前台代码: <div style="pa ...

  7. XAML 名称范围 (x:) 语言特性

    本节介绍为 Windows 运行时实现的 XAML 语言特性的参考信息. 本部分内容 主题 描述 x:Class 属性 配置 XAML 编译,在标记和代码隐藏之间连接分部类.代码分部类在一个独立的代码 ...

  8. POJ 模拟题集合

    http://www.cppblog.com/Uriel/articles/101592.html 感觉这个暑假没有去年有激情啊,,,还没到状态就已经块上学了,,, 真是弱暴了,,,找几道模拟题刷刷. ...

  9. windows下安装phpcms html/ 文件夹不可写的一种错误以及解决方法

    朋友安装phpcms时遇到奇葩问题,环境搭建在windows7中,竟然出现 html/ 和 phpsso_server/caches/文件夹不可写问题(如图) 在windows下出现这种权限的问题真不 ...

  10. (翻译玩)SQLALchemy backref章节文档

    Linking Relationships with Backref 自从在Object Relational Tutorial中第一次提到backref参数后,许多案例中也用到了backref,那么 ...