JS传参及动态修改页面布局


Posted in Javascript onApril 13, 2017

一个关于JS传参及动态修改页面布局的简单小例子。

效果图:

JS传参及动态修改页面布局

HTML:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="css/style.css" rel="external nofollow" />
 </head>
 <body>
  <div id="button"><h1>请为下面的DIV设置样式:</h1><div>点击设置</div></div>
  <div id="set">
   <div class="set1"><span>请选择背景色:</span><span onclick="cl('red')">红</span><span onclick="cl('yellow')">黄</span><span onclick="cl('blue')">蓝</span></div>
   <div class="set2"><span>请选择宽(px):</span><span onclick="wd(200)">200</span><span onclick="wd(300)">300</span><span onclick="wd(400)">400</span></div>
   <div class="set2"><span>请选择高(px):</span><span onclick="hd(200)">200</span><span onclick="hd(300)">300</span><span onclick="hd(400)">400</span></div>
   <span class="btn" onclick="reset()">恢复</span>
   <span class="btn" onclick="apply()">确定</span>
  </div>
  <div id="box"></div>
  <script type="text/javascript" src="js/js.js"></script>
 </body>
</html>

CSS:

/*top:26%; left:40%;*/
#box{width:100px; height: 100px; border:4px black solid;margin-top:100px;}
#button div{background: red; width:100px; height:40px; float:left; color:white; text-align: center; line-height: 40px; cursor: pointer;}
#set{width:20%; height:28%; border:15px rgb(156,148,156) solid; background:white; position: absolute; top:300px; left:300px; box-shadow: 0 0 8px gray; display:none;}
#set div{height: 40px; margin: 20px auto;}
#set div span{width:45px; height:40px; display:block; float:left; margin-left:10px; color:white; line-height:40px; text-align:center; cursor:pointer;}
#set div span:hover{border:1px black solid}
#set div span:nth-of-type(1){width:auto; color:black; font:18px/40px "微软雅黑"; margin-left:12%; border:none; cursor:auto;}  /*:nth-of-type()表示同级同容器下该种类型的第几个标签括号内的数字即指第几个,从1开始*/
#set .set1 span:nth-of-type(2){background:rgb(230,46,0); margin-left:5px;}
#set .set1 span:nth-of-type(2):hover{background:red}
#set .set1 span:nth-of-type(3){background:rgb(239,189,0)}
#set .set1 span:nth-of-type(3):hover{background:yellow}
#set .set1 span:nth-of-type(4){background:rgb(90,148,239)}
#set .set1 span:nth-of-type(4):hover{background:blue}
#set .set2 span{border:1px rgb(198,198,198) solid; color:rgb(136,140,143)}
#set .set2 span:nth-of-type(1):hover{background:white;}
#set .set2 span:nth-of-type(2){background:rgb(239,239,239); margin-left:5px;}
#set .set2 span:nth-of-type(3){background:rgb(239,239,239)}
#set .set2 span:nth-of-type(4){background:rgb(239,239,239)}
#set .set2 span:hover{background:rgb(239,148,0)}
#set .btn{width:60px; height:30px; background:#002952; color:white; display:block; float:left; margin-left:10px; margin-top:10px; text-align:center; line-height:30px; cursor:pointer;}
#set span:nth-of-type(1){margin-left:32%;}

JS:

onload = function(){           //加载完毕给div添加点击事件,可以不这么做,像下面的reset / apply一样建立一个函数并在该div上写上Onclick点击事件调用函数即可
 var btn = document.getElementById('button').getElementsByTagName('div');
 btn[0].onclick = function(){
  document.getElementById('set').style.display = 'block';
 }
}
var box = document.getElementById('box');     //建立全局变量获取DIV对象
function wd(x){            //改变宽度
 box.style.width = x + 'px';
}

function hd(x){           //改变高度
 box.style.height = x + 'px';
}

function cl(x){            //改变颜色
 box.style.background = x;
}

function apply(){
 document.getElementById('set').style.display = 'none';
}

function reset(){            //恢复DIV原来的布局
 box.style.width = 100 + 'px';
 box.style.height = 100 + 'px';
 box.style.background = 'white';
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 #Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 #Javascript
MUI  Scroll插件的使用详解
Apr 13 #Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 #Javascript
mui上拉加载功能实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
You might like
PHP Undefined index报错的修复方法
2011/07/17 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
详解javascript appendChild()的完整功能
2018/08/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python冒泡排序算法的实现代码
2013/11/21 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python求最大连续子数组的和
2018/07/07 Python
Django模板Templates使用方法详解
2019/07/19 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
网站客服岗位职责
2014/04/05 职场文书
美国留学经济担保书
2014/05/20 职场文书
承诺书模板
2014/08/30 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
运动会新闻稿
2015/07/17 职场文书
运动会致辞稿
2015/07/29 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书