1. 程式人生 > >面對物件之繪製矩形

面對物件之繪製矩形

繪製矩形:通過面向物件知識

<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一般填寫所需屬性