控制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 ...
随机推荐
- NSString和NSArray平时练习总结
/*************************字符串练习****************************/ //创建字符串 //1.快速创建 NSString *str1 = @&quo ...
- Mysql 格式化日期格式
DATE_FORMAT(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串. 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值, ...
- eclipse如何创建web项目
1. 打开eclipse,在File上New,然后选择Dynamic Web Project 2. 弹出的页面中如下图,在Project name中输入项目名称JavaWeb01,点击Next ...
- 了解GDAL的图像处理/Python
GDAL是一个操作各种栅格地理数据格式的库.包括读取.写入.转换.处理各种栅格数据格式(有些特定的格式对一些操作如写入等不支持).它使用了一个单一的抽象数据模型就支持了大多数的栅格数据(GIS对栅格, ...
- Java设计模式之--代理模式学习
1.代理模式定义 为其他对象提供一种代理以控制对这个对象的访问.代理对象起到中介服务,可以去掉功能服务和增加额外的服务. 其实按照官方的说法可能不太好理解,代理模式就好比我们生活中买票,一般情况下我们 ...
- 《搭建更新DNS集群服务》RHEL6
DNS服务器的更新: 一听就知道不止一台的DNS服务器,要是一台也用不着更新对吧?一般都是DNS集群. 一台DNS更新了,添加一条数据,下面的都要跟着它变. 主DNS服务器的配置 首先先配置DNS服务 ...
- arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式
arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...
- AngularJS(15)-依赖注入
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- rhel_7.x 安装mysql
http://database.51cto.com/art/201310/413006.htm MariaDB和MySQL --mysql-5.7.12-1.el7.x86_64.rpm-bundle ...
- Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 201 ...