0

我编写了一个对象来使用 javascript 管理 css 类选择器。

使用文字对象正在工作，但不使用另一种 OOP 方式。

对象字面量

var className = {
    getList : function(element,cssClass){
        return element.className.split(' ');
    },
    has : function(element,cssClass){
        var classList=element.className.toLowerCase().split(' ');
        return classList.has(cssClass.toLowerCase());
    },
    add : function(element,cssClass){
        if(className.has(element,cssClass)==false){
            element.className+=' '+cssClass;
        }
    },
    remove : function(element,cssClass){

        var index = element.className.toLowerCase().split(' ').indexOf(cssClass.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

构造对象。（不工作）

var cssClass = new function(element){
    var that=this;

    this.getList = function(){
        return element.className.split(' ');
    }

    this.has = function(className){
        var classList=element.className.toLowerCase().split(' ');
        return (classList.indexOf(className.toLowerCase())>-1);
    }

    this.add = function(className){
        if(that.has(className)==false){
            element.className = className+' '+element.className;
        }
    }

    this.remove = function(className){

        var index = element.className.toLowerCase().split(' ').indexOf(className.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

我收到此错误：

cssClass(d1).add('class1');

行：2 消息：“'[object Object]' 不是函数（评估'cssClass（d1）'）”sourceId：4600193304

奖金问题：这是使用 javascript 管理 css 类的最佳方式吗？有标准的api吗？我应该使用单独的普通函数来写这个吗？

4

1 回答 1

0

您需要new从new function一开始就删除，因为您正在做的是创建一个构造函数，然后立即调用它。相反，您需要在将要使用的元素传递给构造函数时调用它。例如

var cssClass = function(element) {
...
}

接着：

new cssClass(d1).add('class1');

这是一个 JSFiddle：http: //jsfiddle.net/55jkr/1/

要回答额外的问题，处理 CSS 类的最佳方法是使用标准库，例如 jQuery，因为这些库将在初始实现期间为您节省时间，并且已经过测试。如果这不是一个选项，那么你的方法很好。

于 2012-06-23T09:09:42.783 回答