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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解React中合并单元格的正确写法
Jan 08 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python如何实现的二分查找算法
2020/05/27 Python
python3的pip路径在哪
2020/06/23 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
毕业生自荐书模版
2014/01/04 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
安全生产月活动总结
2014/05/04 职场文书
公司踏青活动方案
2014/08/16 职场文书
2015年手术室工作总结
2015/05/11 职场文书
走进毛泽东观后感
2015/06/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
68句权威创业名言
2019/08/26 职场文书