首页 > 普通函数addClass(element, className)改成element.addClass(className)?

普通函数addClass(element, className)改成element.addClass(className)?

如题,以下是我想的代码,不知道思路对不对,具体要怎么实现啊,新手求教~

function ElementObj() {}
ElementObj.prototype.addClass = function(className) {...}

var newElenment = new Element;
newElement.addClass(className);

参考jQuery?

function (value) {
    var classNames, i, l, elem, setClass, c, cl;

    if (jQuery.isFunction(value)) {
        return this.each(function (j) {
            jQuery(this).addClass(value.call(this, j, this.className));
        });
    }

    if (value && typeof value === "string") {
        classNames = value.split(rspace);

        for (i = 0, l = this.length; i < l; i++) {
            elem = this[i];

            if (elem.nodeType === 1) {
                if (!elem.className && classNames.length === 1) {
                    elem.className = value;

                } else {
                    setClass = " " + elem.className + " ";

                    for (c = 0, cl = classNames.length; c < cl; c++) {
                        if (!~setClass.indexOf(" " + classNames[c] + " ")) {
                            setClass += classNames[c] + " ";
                        }
                    }
                    elem.className = jQuery.trim(setClass);
                }
            }
        }
    }

    return this;
}

http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.fn.addClass


不好意思,估计是我没表达清楚。我的意思是像jQuery一样可以调用。返回对象及方法:

function $(className) {
  var element = document.getElementsByClassName(className);
  return {
    element: element,
    addClass: function(className) {
      ... //省略多余代码
      return this;
    },
    removeClass: function(className) {
      ... //省略多余代码
      return this;
    }
  }
}

就可以实现$(...).addClass(...).removeClass(...)了哈~


HTMLElement.prototype.addClass=function(cls){
  if(!this.hasClass(cls)){
       this.className += ' ' + cls;
   }
};
HTMLElement.prototype.hasClass=function(cls){
   if(this.className.split(' ').indexOf(cls)!=-1){
    return true;
  }
  return false;
};

demo点这里


不建议这样做,猴子布丁的一种。
比较好是这样

ele(ele).addClass(...)
【热门文章】
【热门文章】