控制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 ...
随机推荐
- hdu 2689 Sort it
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2689 题目分析:求至少交换多少次可排好序,可转换为逆序对问题. 用冒泡排序较为简单,复杂度较大~~ 也 ...
- HashMap 读后感
HashMap是一个哈希表,内部通过链地址法解决哈希冲突.内部用Entry数组保存数据,每个Entry是一个单向链表. HashMap不保证插入的顺序,线程不同步,允许null 下面是几个重要点: 保 ...
- 三角函数计算，Cordic 算法入门
[-] 三角函数计算Cordic 算法入门 从二分查找法说起 减少乘法运算 消除乘法运算 三角函数计算,Cordic 算法入门 三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来 ...
- LINQ to XML（1）
LINQ to XML可以两种方式和XML配合使用.第一种方式是作为简化的XML操作API,第二种方式是使用LINQ查询工具.下面我使用的是第二种方式. 主要内容:用LINQ查询语句对XML文件里的数 ...
- 微信小程序视频地址
微信小程序视频系列教程完整版,课程中用到的源码附在帖子最后. [url=http://bbs.larkapp.com/forum.php?mod=viewthread&tid=5673][b] ...
- 修改 apache http server 默认站点目录
1.打开apache中的 httpd.conf 文件,将DocumentRoot "D:/Program Files/Apache Software Foundation/Apache2.2 ...
- Rewrite规则简介
Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的(.htaccess)两种方式.如果要想用到rewrite模块,必须先 ...
- js javascript:void(0) 真正含义
我想使用过ajax的都常见这样的代码:<a href="javascript:doTest2();void(0);">here</a>但这儿的void(0) ...
- Optimize date2str function
/*************************************************** Created Date: 19 Jul 2013 Created By: Jimmy Xie ...
- 重绘panel控件，实现panel的阴影效果
最近想在项目中添加一个要有阴影的panel控件,找了好多资料,最后通过采用图片的方式实现了panel的阴影效果,效果图如下: 重绘代码如下: using System; using System.Co ...