面对对象之绘制矩形

最新推荐文章于 2021-07-20 21:45:56 发布

前端搬砖达人

最新推荐文章于 2021-07-20 21:45:56 发布

阅读量300

点赞数

分类专栏：面向对象文章标签：面向对象绘制矩形

本文链接：https://blog.csdn.net/wyq12138/article/details/83927053

版权

面向对象专栏收录该内容

1 篇文章 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一般填写所需属性