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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 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
香妃
2021/03/03 冲泡冲煮
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php将html转为图片的实现方法
2017/05/19 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
很可爱的输入框
2008/08/03 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery链使用指南
2015/01/20 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
员工离职证明范本
2015/06/12 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016年学校招生广告语
2016/01/28 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js