控制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 ...
随机推荐
- 【学习笔记】【C语言】结构体
1.定义结构体变量的3种方式 1> 先定义类型,再定义变量(分开定义) struct Student { int age; }; struct Student stu; 2> 定义 ...
- php面向对象的基础：创建OOP的方法
方法的创建 class Computer{ public function _run(){ return '我是类的一个公共方法'; } } $computer = new Computer(); / ...
- 异常getaddrinfo enotfound
在看NodeJS开发指南这本书时,书中的一个例子,讲解http.request的.代码如下: var http = require('http'); var querystring = require ...
- java中的异常处理机制_函数覆盖时的异常特点
/*注意:异常声明在函数上 异常在子父类覆盖时的体现1.子类在覆盖父类时,如果父类的方法抛出异常,那么子类的覆盖方法,只能抛出父类的异常或者异常的子类2.如果父类方法抛出多个异常,那么子类在覆盖该方法 ...
- java利用反射绕过私有检查机制实行对private、protected成员变量或方法的访问
在java中,如果类里面的变量是声明了private的,那么只能在被类中访问,外界不能调用,如果是protected类型的,只能在子类或本包中调用,俗话说没有不透风的墙.但是可以利用java中的反射从 ...
- linux中的namespace
本文将就namespace这个知识点,进行简单的归纳总结,力求通俗易通.在资料汇总的过程中,参考了许多网上的博客资料,在文章尾部给出相关链接. namespace,命名空间,从名字 ...
- virtualbox安装centos6.5碰到的问题
今天无聊用virtualbox安装centos6.5 , 自己笔记本vm撑不住, 用公司的试试virtualbox先 安装快完成时 没有足够的内存配置kdump”(在英文界面下提示的是“insuffi ...
- [大牛翻译系列]Hadoop（17）MapReduce 文件处理：小文件
5.1 小文件 大数据这个概念似乎意味着处理GB级乃至更大的文件.实际上大数据可以是大量的小文件.比如说,日志文件通常增长到MB级时就会存档.这一节中将介绍在HDFS中有效地处理小文件的技术. 技术2 ...
- 2013-07-23 IT 要闻速记快想
### ========================= ###苹果的新动向今天华尔街日报称,苹果正在测试13英寸的大号iPad,以及更大屏幕的iPhone.而早在五月份,韩国资讯网站 ET New ...
- android 线程
android线程: 通用多个线程通信管理框架: 1.Handler监听者框架:子线程是事件源,主线程是监听者. Handler作为子线程的监听器出现:主线程中生成Handler的子类, ...