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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
js常见表单应用技巧
Jan 09 Javascript
javascript生成随机数的方法
May 16 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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 Cookie的使用教程详解
2013/06/03 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
远程研修随笔感言
2014/02/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
电话客服工作职责
2014/07/27 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript