第一课控制div属性

代码参考来源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].οnclick=function(){o.wider()};this.inputs[1].οnclick=function(){o.higher()};this.inputs[2].οnclick=function(){o.changecolor()};this.inputs[3].οnclick=function(){o.hide()};this.inputs[4].οnclick=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

转载于:https://www.cnblogs.com/weixiaoyi/p/4657792.html

第一课控制div属性相关推荐

js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
控制元素的div属性
1.需求分析改变元素的宽.高.颜色.显示.重置等属性. 2.技术分析基础的css.html.js 3.详细分析如图,单击按钮,改变元素属性: 3.1 HTML部分根据视图不难发现,内容分两大不 ...
html两个div有缝隙_HTML第一课
现在,小编也开始学HTML语言了.今天就教大家用HTML做一个简单的页面. 先上源代码: <!DOCTYPE html> <html> <head><tit ...
【JavaScript从入门到精通】第一课初探JavaScript魅力-01
第一课初探JavaScript魅力-01 JavaScript是什么如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
EV3 直接命令 - 第一课无为的艺术
LEGO 的 EV3 是一个极好的游戏工具.它的标准编程方式是 LEGO 的图形化编程工具.你可以编写程序,把它们传到你的 EV3 brick 上,然后启动它们.但还有另外一种与你的 EV3 交互的方 ...
《迅雷链精品课》第一课：认识区块链
<迅雷链精品课>第一课:认识区块链区块链究竟是什么?共识算法.智能合约又是什么?为帮助广大开发者快速入门,助力区块链开发人才进阶,让区块链不再是遥不可及的技术概念.迅雷链给开发者免费献上 ...
css关于控制div靠左或靠右的排版布局
关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...
第一课大数据技术之Fink1.13的实战学习-部署使用和基础概念
第一课大数据技术之Fink1.13的实战学习文章目录第一课大数据技术之Fink1.13的实战学习第一节 Fink介绍 1.1 Flink介绍背景 1.2 Flink 的应用场景 1.3 流式 ...
2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
2011年冬季斯坦福大学公开课 iOS应用开发教程是个很经典的教程,这个老头讲的很给力.做笔记总结. 第一课名称: MVC and Introduction to Objective-C 这课的主要内 ...

第一课控制div属性

第一课控制div属性相关推荐

最新文章

热门文章

第一课 控制div属性

第一课 控制div属性相关推荐

最新文章

热门文章

第一课控制div属性

第一课控制div属性相关推荐