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 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
Vue实现附件上传功能
May 28 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
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
python中str内置函数用法总结
2020/12/27 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
什么是接口(Interface)?
2013/02/01 面试题
为什么需要版本控制
2016/10/28 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
车辆工程专业求职信
2014/04/28 职场文书
奶茶店创业计划书
2014/08/14 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
个人借款协议书范本
2014/11/17 职场文书
董事长开业致辞
2015/07/29 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA