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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
心扬JS分页函数代码
Sep 10 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Django模板继承 extend标签实例代码详解
May 16 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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排序算法的复习和总结
2012/02/15 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
pyramid配置session的方法教程
2013/11/27 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python处理按钮消息的实例详解
2017/07/11 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
中学生校园广播稿
2014/01/16 职场文书
高中自我评价范文
2014/01/27 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
运动会5000米加油稿
2015/07/21 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python