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 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
js function使用心得
May 10 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
DOM 高级编程
2015/05/06 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
微信小程序switch组件使用详解
2018/01/31 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
python append、extend与insert的区别
2016/10/13 Python
对Python中plt的画图函数详解
2018/11/07 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
师范生实习个人的自我评价
2013/09/28 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
求职信内容怎么写
2014/05/26 职场文书
2014年售票员工作总结
2014/11/19 职场文书
世界气象日活动总结
2015/02/27 职场文书
七年级数学教学反思
2016/02/17 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
vue选项卡切换的实现案例
2022/04/11 Vue.js
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
如何Python使用re模块实现okenizer
2022/04/30 Python