JavaScript动态改变div属性的实现方法


Posted in Javascript onJuly 22, 2015

本文实例讲述了JavaScript动态改变div属性的实现方法。分享给大家供大家参考。具体如下:

这里可以通过JS动态改变div属性,样式等

<script type="text/javascript">
  var oBox = document.getElementById('box');
  var oDiv = document.getElementById('div1');
  var aInput = document.getElementsByTagName('input');
  var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
  var aValue = ['200px', '200px', 'red', 'none', 'block'];
  for(var len=aInput.length,i=0;i<len;i++){
    aInput[i].index = i; //索引
    aInput[i].onclick = function(){
      //重置按钮,cssText清空DIV属性
      if(this.index == aInput.length - 1)oDiv.style.cssText = "";
      //设置DIV属性
      property(oDiv, aAttr[this.index], aValue[this.index]);
    };
  }
  //控制DIV属性
  function property(obj, attr, value){
    obj.style[attr] = value;
  }
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 #Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 #Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 #Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 #Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 #Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 #Javascript
详解参数传递四种形式
Jul 21 #Javascript
You might like
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php的hash算法介绍
2014/02/13 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
javascript实现画板功能
2020/04/12 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
js制作提示框插件
2020/12/24 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
三项教育活动实施方案
2014/03/30 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android