jquery轻松操作CSS样式

$(this).click(function(){
  if($(this).hasClass(“zxx_fri_on”)){
    $(this).removeClass(“zxx_fri_on”);
  }else{
    $(this).addClass(“zxx_fri_on”);
  }
  return false;
});

 

添加或去除元素集合的class name

1. 使用addClass()方法

 addClass(names) 添加names指定的一个或多个class name给wrapped set。如果有多个name，使用空格分开，总之names是个字符串。

返回原来的wrapped set以进行JQuery链式操作。 

注意：如果在添加的样式声明中有重复声明，谁的优先级更高呢？ 请参阅这里看CSS的权重分配。 

 

2. 使用removeClass()方法

removeClass(names) 去除names指定的一个或多个class name。如果有多个names，使用空格分开。

返回原来的wrapped set以进行JQuery链式操作。

3. 使用toggleClass()方法

toggleClass(name) 这次只能有一个class name作为参数。如果该class已经存在，则去除之；如果没有则添加之。

返回原来的wrapped set以进行JQuery链式操作。

获取或设置CSS样式

1. 使用css(name, value)方法

这个方法用来设置css样式给wrapped set中的每一个元素。

name就是css样式的属性名称；

value可以是(string|number|function) ，类似于上节提到的attr(name, value)方法，value如果是function，则传给function的参数时元素在wrappsed set中的序号，function内部使用this指向正在被操作的Javascript DOM元素（够强）。function的返回值就是要设置的 css属性的值了。

比如：

$('div').css('font-size', function(n){
        return (n+1)+'em';

    });

将页面中div按照出现的顺序依次加大字体大小。 

2. 使用css(properties)方法

参数properties是一个object，其中定义了class属性名称和值对。这样一次就可以进行多个css属性的设置了。

返回的依然是wrapped set以方便JQuery链式操作。

如：

$('div:eq(0)').css({

    'font-size' : '2em',

    'color' : '#cc00ff'

}); 

比较郁闷的是,这个Object的属性名必须用引号引起来作为一个字符串，否则是不能被浏览器识别的，attr()类似的方法就无需这样。

同样Object中也可以包含function,如：

    $('div').css({
        'font-size': function(n)
            {
                return (n+2) + 'em';
            }

        });

3. 使用css(name)方法

这个方法返回由name指定的css 属性的值，返回的值是一个字符串，因此有些情况需要转换一下。这个方法只能返回wrapped set中第一个元素的指定css属性值。

如：$('#firstDiv').css('font-size')可能返回一个字符串 '16PX'。

顺便说一下，如果想得到指定元素的class名称（如果指定的话），使用Javascript标准方法，如：

$('#firstDiv')[0].className

4.使用width()和height()方法

1）不带参数的width()和height()方法返回wrapped set中第一个元素的宽和高，这里直接返回一个number（单位为px），无需从字符串转换了。

2) 带参数的witdh(value)和height(value) 给wrapped set中每个元素指定由value表示的宽高。返回wrapped set。

value的值可以是number或者是字符串。如果是number则单位是px。

如：$('div').width(600);    //600px

$('div') .width('400mm'); //400mm

hasClass(name)方法

判断wrapped set中是否有任何一个元素包含了name指定的class name, name也可以是一个用空格分开的多个class names组成的字符串。返回true | false; 

注意：class name和class property name的区别：

-- class name指定义style的css名称，一个style定义会包含很多class property.比如定义一个叫 ownStyle的样式。

-- class property name指css规范中的css属性名。比如 font-size,color等等。

如果想得到一个元素的所有class names，使用attr('className')方法或者Javascript DOM属性className。注意在分割返回的字符串时，首先判断字符串是否为空。如：

$.fn.getClassNames = function() {
    if (name = this.attr("className")) {
        return name.split(" ");
    }
    else {
        return [];
    }
};

 这段代码为JQuery添加了扩展函数getClassNames()用来得到元素的class name数组。