JavaScript动态改变div属性的实现方法
更新时间：2015年07月22日 12:37:42 作者：不吃皮蛋
这篇文章主要介绍了JavaScript动态改变div属性的实现方法,涉及javascript操作页面div元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了ES6中new Function()语法及应用,结合实例形式分析了ES6中new Function()的基本语法、功能、原理、闭包等相关使用技巧,需要的朋友可以参考下2020-02-02
js为快捷键绑定事件，当按这个快捷键时就会触发事先绑定处理函数，下面以ctrl+k为例与大家分享下具体的实现代码2014-09-09
VS2008中使用JavaScript调用WebServices
这篇文章主要介绍了VS2008中使用JavaScript调用WebServices,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了原生JS实现数码表特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
这篇文章主要介绍了JavaScript 浏览器对象模型BOM原理与常见用法,结合实例形式详细分析了JavaScript浏览器对象模型BOM基本概念、原理、使用方法及操作注意事项,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了谷歌浏览器调试JavaScript小技巧,需要的朋友可以参考下2014-12-12
手风琴效果的导航想必大家都有见到过吧，实现的方法也有很多，在本文为大家介绍下使用原生js简单实现下，感兴趣的朋友不要错过2013-11-11
这篇文章主要介绍了js树插件zTree获取所有选中节点数据的方法,是对js树插件zTree非常实用的操作,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了不同编码的页面表单数据乱码问题解决方法,本文使用一个表单不常用属性accept-charset解决了这个问题,需要的朋友可以参考下2015-02-02
javaScript 数值型和字符串型之间的转换2009-07-07
最新评论