面对对象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一般填写所需属性

上一篇下一篇

猜你喜欢

热点阅读