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 方法大全方便学习参考
Feb 25 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
layui自定义工具栏的方法
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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
JS实现放大镜效果
2020/09/21 Javascript
利用python如何处理nc数据详解
2018/05/23 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Django中的文件的上传的几种方式
2018/07/23 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
自我评价正确写法范文
2013/12/10 职场文书
全陪导游欢迎词
2014/01/17 职场文书
小学生新学期寄语
2014/01/19 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
辞职书格式样本
2015/02/26 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL