zoukankan      html  css  js  c++  java
  • 动态添加类和元素样式属性(style and className)

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

    现在来说一下这些撇脚代码(还可以大大的优化)的功能描述,第一个是修改元素的样式即元素的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;
        }

  • 相关阅读:
    20200416_Centos 7.2 在安装系统之前把数据备份出来
    20200322_【转载】关于C#中使用SQLite自适应Any CPU程序的说明
    20200315_python3.6去除标点符号
    性能测试,负载测试,压力测试有什么区别
    app安全测试(转载)
    postman的使用
    安全测试
    MySQL SELECT陈述式范例
    软件测试环境
    性能测试报告
  • 原文地址:https://www.cnblogs.com/Denny_Yang/p/1980288.html
Copyright © 2011-2022 走看看