Javascript控制div属性动态变化实例分析


Posted in Javascript onOctober 08, 2015

本文实例分析了Javascript控制div属性动态变化的方法。分享给大家供大家参考。具体如下:

这里使用JS控制div属性变化,另Div的几何尺寸发生变化,例如变宽、变高、改变颜色、隐藏Div、重置所有属性为默认值等。虽然在本例中,这些属性值的改变很简单就可实现,但在JavaScript网页前端设计中,这种属性或方法经常会被用到,因此还是值得大家关注的。

运行效果截图如下:

Javascript控制div属性动态变化实例分析

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript控制div属性变化</title>
<style> 
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script> 
var changeStyle = function (elem, attr, value)
{
 elem.style[attr] = value
};
window.onload = function ()
{
 var oBtn = document.getElementsByTagName("input");
 var oDiv = document.getElementById("div1");
 var oAtt = ["width","height","background","display","display"];
 var oVal = ["200px","200px","red","none","block"];
 for (var i = 0; i < oBtn.length; i++)
 {
  oBtn[i].index = i;
  oBtn[i].onclick = function ()
  {
   this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
   changeStyle(oDiv, oAtt[this.index], oVal[this.index])
  }
 }
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="改变颜色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
javaScript语法总结
Nov 25 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 #Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 #Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 #Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 #Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
You might like
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php实现可逆加密的方法
2015/08/11 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Django实现文件上传下载
2019/10/06 Python
python求质数列表的例子
2019/11/24 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Numpy之reshape()使用详解
2019/12/26 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
挂职思想汇报
2013/12/31 职场文书
信访工作经验交流材料
2014/05/23 职场文书
应届大学生求职信
2014/07/20 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书