面向对象-矩形

// html
<div id="main"></div>

// js

function Rect (options) {
  this._init(options)
}
Rect.prototype = {
  // 属性
  _init: function (options) {
    // 父标签
    this.parentId = options.parentId
    // 位置
    this.left = options.left || 100
    this.top = options.top || 100
    // 自身的属性
    this.width = options.width || 100
    this.height = options.height || 50
    this.bgColor = options.bgColor || ‘#000‘
    this.borderRadius = options.borderRadius || 0
    this.border = options.border || ‘none‘
  },

  // 行为
  render: function () {
    // 1.获取父标签
    var parentEle = document.getElementById(this.parentId)
    // 2.创建 矩形标签
    var ele = document.createElement(‘div‘)
    parentEle.appendChild(ele)

    ele.style.position = ‘absolute‘
    ele.style.left = this.left + ‘px‘
    ele.style.top = this.top + ‘px‘

    ele.style.width = this.width + ‘px‘
    ele.style.height = this.height + ‘px‘

    ele.style.backgroundColor = this.bgColor
    ele.style.border = this.border
    ele.style.borderRadius = this.borderRadius + ‘px‘
  }
}

var rect = new Rect({
  parentId: ‘main‘,
  width: 500,
  height: 300,
  bgColor: ‘pink‘
})
// console.log(rect)
rect.render()