---
title: 原型操作
date: 2018-06-09 16:29:00
updated: 2018-06-10 12:00:00
categories:
- 网页开发
- 开发应用
- 对象编程
- 函数编程
tags:
- nodejs
---

针对浏览器端的Object的原型进行操作
现在已经不提倡做直接操作dom

//显示/隐藏
//hide()
Object.prototype.hide = function() {
    this.style.display = "none";
    return this;
}
//show() 
Object.prototype.show = function() {
    this.style.display = "block";
    return this;
}

//滑动
//slideDown() 
Object.prototype.slideDown = function() {
    this.style.display = 'block';
    if (this.clientHeight < this.scrollHeight) {
        this.style.height = 10 + this.clientHeight + "px";
        var _this = this;
        setTimeout(function() { _this.slideDown() }, 10)
    } else {
        this.style.height = this.scrollHeight + "px";
    }
}
//slideUp() 
Object.prototype.slideUp = function() {
    if (this.clientHeight > 0) {
        this.style.height = this.clientHeight - 10 + "px";
        var _this = this;
        setTimeout(function() { _this.slideUp() }, 10)
    } else {
        this.style.height = 0;
        this.style.display = 'none';
    }
}

//设置/获取属性
//attr() 
Object.prototype.attr = function() {
    if (arguments.length == 1) {
        return eval("this." + arguments[0]);
    } else if (arguments.length == 2) {
        eval("this." + arguments[0] + "=" + arguments[1]);
        return this;
    }
}
//val() 
Object.prototype.val = function() {
    if (arguments.length == 0) {
        return this.value;
    } else if (arguments.length == 1) {
        this.value = arguments[0];
        return this;
    }
}
//html() 
Object.prototype.html = function() {
    if (arguments.length == 0) {
        return this.innerHTML;
    } else if (arguments.length == 1) {
        this.innerHTML = arguments[0];
        return this;
    }
}

//css() 
Object.prototype.css = function() {
    if (arguments.length == 1) {
        return eval("this.style." + arguments[0]);
    } else if (arguments.length == 2) {
        eval("this.style." + arguments[0] + "='" + arguments[1] + "'");
        return this;
    }
}
// USING EVAL MEY BE NOT GOOD.!!!


//添加元素
//append() 
Object.prototype.append = function(newElem) {
    this.innerHTML += newElem;
    return this;
}
//prepend() 
Object.prototype.prepend = function(newElem) {
    this.innerHTML = arguments[0] + this.innerHTML;
    return this;
}
//after() 
Object.prototype.after = function(newElem) {
    this.outerHTML += arguments[0];
    return this;
}
//before() 
Object.prototype.before = function(newElem) {
    this.outerHTML = arguments[0] + this.outerHTML;
    return this;
}

//删除元素
//empty() 
Object.prototype.empty = function() {
    this.innerHTML = "";
    return this;
}
//替换元素
//replaceWith() 
Object.prototype.replaceWith = function(newElem) {
    this.outerHTML = arguments[0];
    return this;
}

//设置元素类名属性
//hasClass() 
Object.prototype.hasClass = function(cName) {
    return !!this.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
}
//addClass() 
Object.prototype.addClass = function(cName) {
    if (!this.hasClass(cName)) {
        this.className += " " + cName;
    }
    return this;
}
//removeClass() 
Object.prototype.removeClass = function(cName) {
    if (this.hasClass(cName)) {
        this.className = this.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
    return this;
}
//I prefer delClass to removeClass
Object.prototype.delClass= function(cName) {
    if (this.hasClass(cName)) {
        this.className = this.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    }
    return this;
}