代码参考来源http://js.fgm.cc/learn/，本系列以面向对象的知识重构代码。

<!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>无标题文档</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>

</head>

<body>

<div id="outer">

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

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

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

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

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

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

</div>

<script>

function Divblock(){

  this.set();

  this.addmouseevents();

}

Divblock.prototype=(function(){

      var element=document.getElementById("div1"),

          style=element.style,

          colorslist=["red","orange","yellow","green","blue","purple"],

          num=0;

 return{

      wider:function(){

          style.width=(parseInt(style.width)+30)+"px";},

      higher:function(){

          style.height=(parseInt(style.height)+30)+"px";},

      changecolor:function(){

          num<=colorslist.length?num=num:num=0;

          style.background=colorslist[num++];},

      hide:function(){

          style.display="none";},

      set:function(){

          style.width="100px";

          style.height="100px";

          style.background="black";

          style.display="block"},

      addmouseevents:function(){

          var divs=document.createElement("div"),

              text=document.createTextNode("");

          divs.appendChild(text);

          divs.style.background="white";

          divs.style.fontSize="12px"

          divs.style.position="absolute";

          element.onmouseout=function(){

             document.body.removeChild(divs)};

          element.onmousemove=function(e){

              text.nodeValue="W:"+parseInt(style.width)+"  H:"+parseInt(style.height)+"  C:"+style.background+"  ";

             text.nodeValue=text.nodeValue.toUpperCase();

              divs.style.left=e.clientX+5+"px";

              divs.style.top=e.clientY+5+"px";

              document.body.appendChild(divs);

              }

         }

        }

  })();

function Buttoms(){

    this.inputs=document.getElementsByTagName("input");

    }

Buttoms.prototype={

    add_even_listener:function(o){

        this.inputs[0].onclick=function(){o.wider()};

        this.inputs[1].onclick=function(){o.higher()};

        this.inputs[2].onclick=function(){o.changecolor()};

        this.inputs[3].onclick=function(){o.hide()};

        this.inputs[4].onclick=function(){o.set()};

        }

    }

var divblock=new Divblock();

var buttoms=new Buttoms();

buttoms.add_even_listener(divblock);

</script> 

</body>

</html>

2015-07-18 22:30:00

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

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

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

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

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

  3. js练习-控制div属性

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

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

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

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

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

  6. 控制div属性

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

  7. 作品第一课----改变DIV样式属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js项目练习第一课

    控制div属性 <style> .c1 { width:200px; height:200px; background-color: #000; display: block; margi ...

  9. Spring第一课:IOC控制反转，什么是反转，什么又是控制？

    前言 学习Spring第一课,就是认识IOC控制反转,要了解它还真得花一些功夫.今天主要理解透彻它的真谛,而不仅限于表面. 上道小菜 public class BusinessService { pr ...

  10. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

随机推荐

  1. Java开发AI项目，太爽了！LangChain4j保姆级教程

    大家好,我是程序员鱼皮.现在 AI 应用开发可以说是程序员必备的技能了,求职时能够大幅增加竞争力.之前我用 Spring AI 带大家做过一个 开源的 AI 超级智能体项目,这次我来带大家快速掌握另一 ...

  2. openWrt安装三方插件

    前言 openWrt是一款开源的路由器系统,其最大的优点就是 支持第三方扩展插件. 新增的插件基本都会在左侧的服务菜单中展现,通过此入口就可以使用插件功能. 大部分openWrt固件都帮你装好了ope ...

  3. 提取并下载谷歌应用商店软件（Google Play APK download）教程

    参考:https://www.bilibili.com/read/cv12761045 接进到下面任意一个网站中,搜索想要下载的应用即可. (0) https://google-play.en.upt ...

  4. amr 数据格式

    参考文章 大牛博客

  5. QT 新建子窗口注意事项

    简介 新建子窗口注意事项 要保持类名一致 例如 Log.ui class Log 都是Log

  6. 记录React echart demo实践

    最近在了解学习React,找了个demo Echarts-based-on-React:基于react技术栈,使用Echarts,实现地图深钻.柱状图.折线图.散点图 Echarts-based-on ...

  7. 企业IT部门在集成类项目中扮演的角色

    随着企业信息化建设的不断深入,集成类项目成为企业发展的重要支撑.这类项目涉及场景多.系统杂.实施牵扯广.周期长,对技术和管理的要求极高.企业IT部门(信息化部门)作为企业的技术核心和纽带,对业务需求. ...

  8. 题解：Luogu-P9433 [NAPC-#1] Stage5 - Conveyors

    传送门 个人认为,做这种题把思路想清晰代码自然就写出来了,所以要注重思考的过程,重点把握一些自己想不到的性质或技巧. 本篇题解在现有题解的基础上对解法进行了更详细的说明.阅读前建议确保自己会树链剖分和 ...

  9. babylon.js 学习笔记(9)

    接上回继续,做为一个游戏引擎,怎能没有Sprite(精灵)? 下面是基本示例: const createScene = function () { const scene = new BABYLON. ...

  10. C#/.NET/.NET Core技术前沿周刊 | 第 47 期（2025年7.14-7.20）

    前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...