动态添加类和元素样式属性（style and className）

转自： http://www.cnblogs.com/Denny_Yang/archive/2011/03/10/1980288.html

写了将近两天了，不断的测试，不断的改，终于还是写出来了。高手请勿见笑。确实花了不好时间，囧~~~

现在来说一下这些撇脚代码（还可以大大的优化）的功能描述，第一个是修改元素的样式即元素的style方法，传入的style可以是对象，也可以是字符串。

有自己的格式。如果元素已经有定义过的样式，比如说已经定义过boder了，现在又传入一个border,那么新添加的样式会覆盖掉原有样式。别问我为什么要

用这么麻烦的代码去覆盖，而不是直接添在样式属性的最后面。答案很简单，重复的东西，让我看了不爽~~—_—~~

然后第二个方法添加的元素的class，即元素的样式类。如果类名重复，将只留一个。

然后，然后就没啦~~后面一大堆都是辅助方法。不好意思，功力有限，暂时只写得出这种撇脚的代码.....   

• 加样式

    addStyle: function(currNode, newStyle) {
        var temp = "";
        var oo = {};
        var on = {};
        var oldStyle = currNode.getAttribute("style"); //Get the old style
        if (oldStyle === null) oo = null;
        else oo = this.strToObject(oldStyle);

        if (typeof newStyle == "object") {
            for (var i in newStyle) {
                temp += i.replace(/([A-Z])/, "-$1").toLowerCase() + ":" + newStyle[i] + ";"; //for the font-weight、boder-bottom etc.
            }
            on = this.strToObject(temp);
        } else {
            on = this.strToObject(newStyle);
        }
        on = this.mergeObject(oo, on);
        temp = "";
        for (var i in on) temp += i + ":" + on[i] + ";";
        if (document.all) currNode.style.cssText = temp; //currNode.setAttribute("cssText", temp) is't work(I don't know why); //IE
        else currNode.setAttribute("style", temp); //FF
    },

• 添加类

    //Add new class to the node
    addClass: function(currNode, newClass) {
        var oldClass, newClass;
        oldClass = currNode.getAttribute("class") || currNode.getAttribute("className");

        if (oldClass !== null) {
            oldClass = oldClass.split(" ");
            newClass = newClass.split(" ");
            newClass = this.mergeArray(newClass, oldClass).join(" "); //avoid the same class
        }
        currNode.className = newClass; //IE && FF
    },

• 合并数组（重复删除）

    //It's merge arr1 and arr2 , delete the same element only leave one
    //It's only apdapter array. If object, no. 
    //The sequence of the two array is not required.
    mergeArray: function(arr1, arr2) {
        for (var i = 0; i < arr1.length; i++) {
            for (var j = 0; j < arr2.length; j++) {
                if (arr1[i] === arr2[j]) {
                    arr1.splice(i, 1); //delete the same element from arr1
                }
            }
        }
        for (var i = 0; i < arr2.length; i++) {
            arr1.push(arr2[i]);
        }
        return arr1;
    },

• 合并对象（重复删除）

    mergeObject: function(oldObj, newObj) {
        var temp = [];
        for (var i in oldObj) {
            for (var j in newObj) {
                if (i === j) {
                    temp.push(i);
                    break;
                }
            }
        }
        for (var i = 0; i < temp.length; i++) delete oldObj[temp[i]];
        for (var i in oldObj) newObj[i] = oldObj[i];
        return newObj;
    },

• 字串转对象

    //Convert a str to a Object
    //The format of the str is like this:"font-sizse:12px;color:#336699;border:1px solid #000;"
    strToObject: function(str) {
        str = str.toLowerCase(); //Convert the str to lower letter and cut the space int it
        var o = {};
        var arr = [];
        var temp = [];
        arr = str.split(";");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]) {
                temp = arr[i].split(":");
                if (temp[0] && temp[1]) {
                    temp[0] = temp[0].replace(/(^\s*)|(\s*$)/g, "");
                    o[temp[0]] = temp[1];
                }
            }
        }
        return o;
    }