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 相关文章推荐
javascript如何使用bind指定接收者
May 04 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解Vuex管理登录状态
Nov 13 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
深入解析ES6中的promise
Nov 08 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
JavaScript DOM基础
2015/04/13 Javascript
js友好的时间返回函数
2016/08/24 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
vuex管理状态仓库使用详解
2020/07/29 Javascript
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python3实现表白神器
2019/04/09 Python
python实现图片中文字分割效果
2019/07/22 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
django框架ModelForm组件用法详解
2019/12/11 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python如何使用input函数获取输入
2020/08/06 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
《穷人》教学反思
2014/04/08 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers