JQuery之四: 操作元素的CSS樣式

前面講了操作元素的properties和attributes了，是時候操縱一下它們的CSS樣式了。

添加或去除元素集合的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數組。