jQuery入門：CSS，樣式和大小

jQuery入門：CSS，樣式和大小

jQuery包含了擷取和設定元素的CSS屬性的簡便方法：

    //擷取CSS屬性    $( h1 ).css( fontSize ); // Returns a string such as 19px.返回一個字串19px。    $( h1 ).css( font-size ); // Also works.同樣會工作。    // 設定CSS屬性。    $( h1 ).css( fontSize, 100px ); // Setting an individual property.設定單獨的屬性    // 設定多個屬性。    $( h1 ).css({        fontSize: 100px,        color: red    });

注意第二行參數的形式——它是一個包含多重屬性的對象。這是傳遞多重參數到一個函數的常用辦法，且很多jQuery設定函數的方法都接受一次性設定多個值的對象。

CSS屬性在JavaScript中通常需要將連字號換成駝峰式拼字。例如，CSS屬性font-size被用做Javascript中的一個屬性名稱的時候，用fontSize來表示。然而，當用.css()方法象字串一樣傳遞一個CSS屬性名稱的時候，並不會這樣應用——在這種情況下，不管是駝峰式拼字還是連字號的形式都將運行。

當用一個對象來設定CSS的時候，CSS屬性應該用駝峰式拼字而不應該用一個連字號，但在可生產代碼（production-ready code）中，不推薦使用.css()做為設定函數。

應用CSS classes 設定樣式

做為一個擷取函數，.css()方法是很有價值的。然而，在產生就緒的代碼中通常會避免將它做為設定函數，因為通常表現的資訊最好和JavaScript代碼保持分離。相反，用classes寫那些描述多種顯示形式的CSS規則，然後更換元素的class。

    // 用classes工作。    var h1 = $( h1 );    h1.addClass( big );    h1.removeClass( big );    h1.toggleClass( big );    if ( h1.hasClass( big ) ) {        ...    }

Classes還能夠被用來儲存關於一個元素的狀態資訊，例如表明哪個元素被選擇。

大小

jQeury提供了豐富的方法用來擷取和修飾一個元素的尺寸和定位資訊。

下面的代碼展示了jQuery中擷取元素尺寸大小功能的一個簡短概述。如果需要jQuery操作元素尺寸大小方法的全部細節，參見dimensions documentation on api.jquery.com。

    // 基礎的尺寸大小方法。    //設定所有

元素的寬度。 $( h1 ).width( 50px ); //擷取第一個 元素的寬度。 $( h1 ).width(); //設定所有 元素的高度。 $( h1 ).height( 50px ); //擷取第一個 元素的寬度。 $( h1 ).height(); // 返回一個對象，包含第一個 相於對於它的“父元素位移（定位）”的定位資訊。 $( h1 ).position();