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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 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制作静态网站的模板框架(四)
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php array的学习笔记
2012/05/16 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python文件处理
2016/02/29 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python scipy卷积运算的实现方法
2019/09/16 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
财务主管自我鉴定
2014/01/17 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
独生子女证明范本
2015/06/19 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android