创建一个绝对定位的相对定位DOM

CreateDom.js

;(function () {
    /**
     * 创建一个绝对定位的相对定位DOM
     * @param html
     * @param parent
     * @constructor
     */
    function CreateDom (html, parent) {
        this.dom = document.createElement('div');
        this.parent = document.querySelector(parent);
        this.init(html);

        for(var p in this) {
            // 把原型方法追加到实例上
            if(!this.hasOwnProperty(p)) this.dom[p] = this[p].bind(this);
        }
        return this.dom;
    }

    CreateDom.prototype.init = function (html) {
        this.html(html);
        this.setStyle({
            position: 'absolute',
            top: 0,
            left: 0,
            'z-index': 1991
        });

        this.parent.appendChild(this.dom);
    };

    /**
     * 修改html
     * @param html
     */
    CreateDom.prototype.html = function (html) {
        this.dom.innerHTML = html;
    };

    /**
     * 设置样式
     * @param style
     */
    CreateDom.prototype.setStyle = function (style) {
        for(var p in style) {
            this.dom.style.setProperty(p, style[p], null);
        }
    };

    /**
     * 显示
     */
    CreateDom.prototype.show = function () {
        this.setStyle({display: 'block'});
    };

    /**
     * 隐藏
     */
    CreateDom.prototype.hide = function () {
        this.setStyle({display: 'none'});
    };

    /**
     * 设置X轴
     * @param num
     */
    CreateDom.prototype.setX = function (num) {
        this.setStyle({left: num + 'px'});
    };

    /**
     * 设置Y轴
     * @param num
     */
    CreateDom.prototype.setY = function (num) {
        this.setStyle({top: num + 'px'});
    };

    window.CreateDom = CreateDom;
})();