原型继承的小案例

时间：2021-01-22 14:59:03
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .current{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<script>
    var element = {
        /*追加dom元素到node节点中*/
        appendTo: function (node) {
            /*判断是否是dom元素*/
            if(node.nodeType){
                /*如果是使用node元素追加*/
                node.appendChild(this.Dom);
            }else if(node.Dom){
                /*如果传入的DivTag对象 使用node.Dom*/
                node.Dom.appendChild(this.Dom);
            }
            return this;
        },
        add: function (node) {
            /*判断是否是dom元素*/
            if(node.nodeType){
                /*如果是使用node元素追加*/
                this.Dom.appendChild(node);
            }else if(node.Dom){
                /*如果传入的DivTag对象 使用node.Dom*/
                this.Dom.appendChild(node.Dom)
            }
            return this;
        },
        css: function (option) {
            /*判断option是否存在是否为对象*/
            if(!option || typeof option != 'object') return false;
            for(var key in option){
                /*设置样式*/
                this.Dom.style[key] = option[key];
            }
            return this;
        },
        html: function (str) {
            /*判断str是否为字符串*/
            if(typeof str != 'string') return false;
            /*添加文本*/
            this.Dom.innerHTML = str;
            return this;
        },
        attr: function (name,value) {
            /*判断value是否存在*/
            if(value){
                /*如果存在设置属性*/
                this.Dom.setAttribute(name,value);
            }else{
                /*如果不存在获取属性*/
                return this.Dom.getAttribute(name);
            }
            return this;
        }

    }
    /*创建标签函数*/
    var createElement = function (tagName) {
        this.Dom = document.createElement(tagName);
    }
    /*设置原型对象*/
    createElement.prototype = element;
    /*创建对象链式调用方法*/
    new createElement('div').appendTo(document.body).html('我是标签').css({
        color:'red'
    }).attr('class','current');



</script>
</body>
</html>

 

标签：

相关文章