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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
我的论坛源代码(五)
2006/10/09 PHP
几个学习PHP的网址
2006/11/25 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
Python实现字典依据value排序
2016/02/24 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
带你认识Django
2019/01/15 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python如何操作mysql
2020/08/17 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
小学生元旦广播稿
2014/02/21 职场文书
公司晚会策划方案
2014/05/17 职场文书
医学求职信
2014/05/28 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js