控制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 ...
随机推荐
- vSphere存储
write by xiaoyang 配置iSCSI外部存储 1. 选择配置——硬件——存储 2. 在存储适配器里选择添加软件iSCSI适配器 3. 确认添加 4. ...
- ASP.Net 类(CS)文件怎样获取Web应用程序的路径
Web应用程序,写了一个线程CS类别,这个类别将会放于Global.asax文件中执行,主要是监控程序下某一个文件是否有异动,而作出相应警示动作,如发送邮件等. 实现运行过程中,也许会有一个情况出现, ...
- jquery 获得table 行数
1.获得Table总行数,分别使用了两种方法,结果不同:: 1).$("#table_Id").children("tr").length; 只能获得静态页面t ...
- 20141104--SQL连接查询，联合查询
---------------------------连接查询-------------------------------- --横向连接查询 --可以将子查询放在from之前,用来替换显示出来的信 ...
- 解决IE8打开默认弹出开发者工具的问题
有一次开发用ie调试后再次打开总是自动弹出ie开发者工具,而且在网页的上一层弹出.点击X关闭后再次打开还是会弹出! 找ie的设置也没有找到关闭的选项. 在网上搜了很多资料才找到解决的办法,在这里分享一 ...
- usb2.0 规范学习笔记
1.一个USB HOST 最多可以同时支持128 个地址,地址0 作为默认地址,只在设备枚举期间临时使 用,而不能被分配给任何一个设备,因此一个USB HOST 最多可以同时支持127 个地址,如果一 ...
- (转)RabbitMQ消息队列（四）：分发到多Consumer（Publish/Subscribe）
上篇文章中,我们把每个Message都是deliver到某个Consumer.在这篇文章中,我们将会将同一个Message deliver到多个Consumer中.这个模式也被成为 "pub ...
- Java中浮点数能连续精确表示整数的范围
转自http://blog.csdn.net/seizef/article/details/5571783#ref_1,有删改. 先简单介绍一下浮点数在计算机中的组成,在Java中采用的浮点数表示法是 ...
- Linux设备驱动01
准备: 1.英语-是工具 2.电路原理图-补充“数电”的知识 3.阅读内核代码的能力 linux:vi+ctags+cscope windows:source insight 驱动开发的步骤 I.编辑 ...
- c++11:iota
iota: Fills the range [first, last) with sequentially(循环的) increasing values, starting with value an ...