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>元素的宽度。
    $( "h1" ).width( "50px" );

    //获取第一个<h1>元素的宽度。
    $( "h1" ).width();

    //设置所有<h1>元素的高度。
    $( "h1" ).height( "50px" );     

    //获取第一个<h1>元素的宽度。
    $( "h1" ).height();

    // 返回一个对象，包含第一个<h1>相于对于它的“父元素偏移（定位）”的定位信息。
    $( "h1" ).position();

原文地址