<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>控制div属性</title>

<style>

#outer{width:500px;margin:0 auto;padding:0;text-align:center;}

#div1{width:100px;height:100px;background:black;margin:10px auto;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>

<div id="outer">

<input type="button" value="变宽" />

<input type="button" value="变高" />

<input type="button" value="变色" />

<input type="button" value="隐藏" />

<input type="button" value="重置" />

<div id="div1"></div>

</div>

</body>

</html>

控制div属性的更多相关文章

  1. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  2. 控制DIV属性——实现盒子长、宽、背景等变化

    写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...

  3. 原生Javascript实现控制DIV属性

    写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...

  4. 第一课 1) 控制div属性 总结

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 01 使用JavaScript原生控制div属性

    写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...

  6. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

  8. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  9. css关于控制div靠左或靠右的排版布局

    关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...

随机推荐

  1. 【bzoj3329】Xorequ 数位dp+矩阵乘法

    题目描述 输入 第一行一个正整数,表示数据组数据 ,接下来T行每行一个正整数N 输出 2*T行第2*i-1行表示第i个数据中问题一的解, 第2*i行表示第i个数据中问题二的解, 样例输入 1 1 样例 ...

  2. 几种API接口

    实用号码归属地查询(IP 地址,手机号码): 默认格式: http://api.liqwei.com/location/ (使用来访者的 IP 地址) 指定 IP 地址格式: http://api.l ...

  3. 【Begin】

    迫于无奈,我想提高写博速度.我要尽量压缩每道题的题解思路.最终我选择背叛大米兔,但是我支持它.因为它的每一篇博客耗时巨大,精贵的竞赛集训时间经不起它花:可同时精致的博客会带给来浏览的Oier们更多东西 ...

  4. docker集群之swarm

    1.swarm是什么? Swarm是Docker公司自研发的容器集群管理系统,Swarm在早期是作为一个独立服务存在,在Docker Engine v1.12中集成了Swarm的集群管理和编排功能.可 ...

  5. Twitter如何在数千台服务器上快速部署代码？

    答案是:用BT,也就是你我应该都很熟悉的BitTorrent. 对于网站经营者.创业者来说,扩展性的问题是在网站流量成长过程中势必会面对的问题,如何建立一个具有扩展性的架构(scalable arch ...

  6. Docker 开源项目之 registry - 部署 registry （注册表）服务器

    原文地址 在部署 registry 之前需要现在主机上安装 Docker.registry 实际上就是运行在 Docker 中的 registry 镜像的实例. 本主题提供关于部署和配置 regist ...

  7. c# dynamic,maybe I should say it is just some shortcut for "Object", box and unbox, without the cast

    dynamic: void Main() { var b="2"; dynamic a="2"; if(a.GetType()==typeof(int))b+= ...

  8. 【Vue起步-Windows】N01：环境安装

    本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境 在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...

  9. [LeetCode] Find Minimum in Rotated Sorted Array 二分搜索

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  10. 【CDockablePane】关于CDockablePane

    1.DockPane是CFrameWndEx框架窗口的函数,不能用于基于对话框的应用程序,也不能用于老版本VC,只能用于基于单文档和多文档的应用程序. 2.最佳变通实现办法:创建CFormView基类 ...