面对对象2之绘制矩形
2018-11-10 本文已影响0人
前端毛毛
绘制矩形：通过面向对象知识
<body>
<div id="main"></div>
<script>
var j=new Rect({parentId:"main",position:"absolute",left:"100",top:"200",width:"200",height:"200",backgroundColor:"red"});
j.jux();
</script>
</body>
Rect.js
function Rect(op) {
this._init(op);
}
Rect.prototype={
//所需属性
_init:function (option) {
option=option || {};
//获取父级id
this.parentId=option.parentId;
//位置
this.position=option.position ;
this.left=option.left || 100;
this.top=option.top || 100;
//宽高背景颜色边框
this.border = option.border || 0;
this.width=option.width || 50;
this.height=option.height ||100;
this.backgroundColor=option.backgroundColor || "blue";
},
jux:function () {
var parent=document.getElementById(this.parentId);
var child=document.createElement("div");
child.style.position=this.position;
child.style.top=this.top+"px";
child.style.left=this.left+"px";
child.style.width=this.width+"px";
child.style.height=this.height+"px";
child.style.border=this.border;
child.style.backgroundColor=this.backgroundColor;
parent.appendChild(child);
}
}
_init一般填写所需属性
