js实现css、addClass、removeClass和toggleClass


JQuery中获取CSS样式

css(name)：访问第一匹配元素的样式属性

css(name,value)：在所有匹配的元素中，设置一个样式属性的值

css(properties)：把一个“名/值对”对象设置为所有匹配元素的样式属性

css(name,function(index,value))：在所有匹配的元素中，设置一个样式属性的值

-------------------------------------------------------------------------------------

Javascript中获取样式的值

function css(obj, attr, value) {

switch (arguments.length) {

case 2:

if (typeof arguments[1] == "object") { //批量设置属性

for (var i in attr) obj.style[i] = attr[i]

}

else { // 读取属性值

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]

}

break;

case 3:

//设置属性

obj.style[attr] = value;

break;

default:

return "";

}

}

采用这种方式同样实现了 JQuery的效果。

---------------------------------------------------------------------------------------

JQuery中有addClass,removeClass,toggleClass

addClass(class)：为每个匹配的元素添加指定的类名

removeClass(class)：从所有匹配的元素中删除全部或者指定的类

toggleClass(class)：如果存在（不存在）就删除（添加）一个类

---------------------------------------------------------------------------------------

function hasClass(obj, cls) {

return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

}

function addClass(obj, cls) {

if (!this.hasClass(obj, cls)) obj.className += " " + cls;

}

function removeClass(obj, cls) {

if (hasClass(obj, cls)) {

var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

obj.className = obj.className.replace(reg, ' ');

}

}

采用这种方式同样实现了 JQuery的效果。