面對物件之繪製矩形
阿新 • • 發佈：2018-11-10
繪製矩形：通過面向物件知識
<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一般填寫所需屬性