动态添加类和元素样式属性(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;
}