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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php5.2.0内存管理改进
2007/01/22 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
JS中Object对象的原型概念基础
2018/01/29 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python七夕浪漫表白源码
2019/04/05 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python实现微信小程序支付功能
2019/07/25 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js