控制DIV属性——实现盒子长、宽、背景等变化
写在最前面：Demo的源起来自于http://js.fgm.cc/learn/，但是实现部分都是经过自己思考和优化的，有时会借助别人的图片，然而“窃喜”。如无特殊说明，demo都是经过ie6、ie7等低版本浏览器测试通过的。表要笑话我有“自虐”倾向，各种是有情节和情结的。力图做的专业再专业一点点。^_^
功能实现：单击响应的功能按钮实现DIV属性的切换
Demo地址：http://yuyingguo.sinaapp.com/jsStudy/控制div属性.html
有图有真相：
自己的代码实现：
（在这里书写的时候出现了点小插曲，又涨了点姿势——当我在js中试图用targetDiv.style.width获取宽度的时候，始终没有获取到，其实这是和css三种样式定义有关的：三种样式为：外联样式、内部样式、内联样式。)至于详情，可以移步到我的另外一篇博客：http://www.cnblogs.com/Iwillknow/p/3691492.html
<!doctype html>
<html>
<head>
<style>
#box {
width: 500px;
height: 300px;
background: black;
}
</style>
<script>
window.onload = function() {
var buttons = document.getElementsByTagName("button");
var targetDiv = document.getElementById("box");
var flag = 0; //表示可见
for(var i = 0;i < buttons.length;i++) {
buttons[i].index = i; //解决闭包问题
buttons[i].onclick = function() {
if(this.index === 0) { //变宽
targetDiv.style.width = "1000px";
}else if(this.index === 1) { //变高
targetDiv.style.height = "600px";
}else if(this.index === 2) { //变色
targetDiv.style.background = "red";
}else if(this.index === 3) { //隐藏
targetDiv.style.display = "none";
flag = 1;
}else { //重置
targetDiv.style.display = "block";
flag = 0;
}
};
}
};
</script>
</head>
<body>
<button>变宽</button>
<button>变高</button>
<button>变色</button>
<button>隐藏</button>
<button>重置</button>
<div id="box"></div>
</body>
</html>
以上代码可用性不高，并且代码重复，既然是样式设置是一个频繁的操作，完全可以提取出来成立一个函数呀~so
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>控制div属性</title>
<style>
#div1{width:100px;height:100px;background:black;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>
<input type="button" value="变宽">
<input type="button" value="变高">
<input type="button" value="变色">
<input type="button" value="隐藏">
<input type="button" value="重置">
<div id="div1"></div>
</body>
</html>
代码简明了然，不过你可能需要好好理解一下这句代码：
(this.index == oBtn.length - 1) && (oDiv.style.cssText = "");
&&操作的三层理解和cssText的相关知识。前者可以参看《javascript的权威指南》、后者可以移步到http://www.cnblogs.com/Iwillknow/p/3691490.html
分析起来就是：根据 this.index == oBtn.length - 1，判读出是否单击了重置按钮；如果单击了重置按钮，需要清除之前通过 elem.style[attr] = value添加到内联中属性，以防元素是隐藏的，所以添加display: block，同时内部样式因为内联样式的清空，进行了应用，也就是得到了重置。
小小的一个demo，知识点也不少啊^_^
控制DIV属性——实现盒子长、宽、背景等变化的更多相关文章
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- 第一课 1) 控制div属性 总结
点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 01 使用JavaScript原生控制div属性
写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...
- 原生Javascript实现控制DIV属性
写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...
- 控制div属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02
目录 控制标签元素样式 长宽属性.字体属性.文本对齐.文本装饰.首行缩进 背景属性.边框属性.圆角 display 显示方式 盒子模型 margin.padding... float浮动 overfl ...
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- 纯css实现长宽等比例的div
现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的 这样在浏览器宽度变化之后,我们的元素也能自动更新长宽.例如:我们在页面上摆了一个div,这 ...
- android 代码控制控件的长宽，小技巧
要在代码里改变ImageView 的长宽,如图 通过拿到contentImage这对象的控件参数,再去改变,再设置 , 上图的contentImage为ImageView对象: 而这里 要提醒的是,L ...
随机推荐
- ajax后台return，js判断方法
private string CreateJoson(string result, string message) { return "{" + "\"resu ...
- [转] 正则表达式 oracle
地址:http://www.cnblogs.com/Azhu/archive/2012/04/03/2431127.html 从oracle database 10gsql 开发指南中copy的. 正 ...
- 20140912-关于.NET技术体系的思维导图
逛园子时看到的. 关于.NET技术体系的思维导图
- 济南学习 Day 2 T3 pm
它[问题描述]N个人坐成一圈,其中第K个人拿着一个球.每次每个人会以一定的概率向左边的人和右边的人传球.当所有人都拿到过球之后,最后一个拿到球的人即为胜者.求第N个人获胜的概率. (所有人按照编号逆时 ...
- josephus问题
问题描述 n个人围成一圈,号码为1-n,从1开始报数,报到2的退出,剩下的继续从1开始报数,求最后一个人的号码. 算法分析 最直观的算法是用循环链表模拟.从首节点开始,不断删除第二个节点,直到只剩一个 ...
- VS2010使用TeeChart5的ColorGrid绘制一维距离像
绘制一维距离像原理:使用TeeChart控件中的ColorGrid显示(X,Y,Z)三维数据,X和Z分别代表一维距离像的x轴和y轴数据,Y代表对应的数值,以不同颜色显示. 1.注册TeeChart5 ...
- Linux命令行提示符设置
我们使用Linux系统时接触最多的是它的命令行窗口,很多时候我们都需要在命令行上输入命令,在输入的命令前都会有提示符,一般系统默认的提示符形式是:[username@host 工作目录]$. 其实,我 ...
- 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法
$x_pi = 3.14159265358979324 * 3000.0 / 180.0; //火星坐标系 (GCJ-02)转百度坐标系 (BD-09)算法 function bd_encrypt($ ...
- 【Qt】Qt之自定义界面（添加自定义标题栏）【转】
简述 通过上节内容,我们实现了自定义窗体的移动,但是我们缺少一个标题栏来显示窗体的图标.标题,以及控制窗体最小化.最大化.关闭的按钮. 自定义标题栏后,所有的控件我们都可以定制,比如:在标题栏中添加换 ...
- 【Qt】Qt之自定义界面（实现无边框、可移动）【转】
简述 UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性.有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. 爱美之心人皆有之.其实软件 ...