JQuery官方学习资料（译）：CSS

    JQuery提供了一个处理方法，可以获取或设置元素的CSS属性。

// 获取 CSS 属性

$( "h1" ).css( "fontSize" ); // 返回一个字符串，例如"19px"

$( "h1" ).css( "font-size" ); // 这也是可以的

// 设置 CSS 属性

$( "h1" ).css( "fontSize", "100px" ); // 设置一个属性

// 设置多个属性

$( "h1" ).css({

fontSize: "100px",

color: "red"

});

    需要注意的是，设置多个属性的时候，参数是一个对象，这个对象包含了多个属性。JQuery的setter方法接收这样的对象作为参数可以一次完成多属性的设置工作。

 

• 使用Class

    如果只是想读取CSS样式，可以使用.css()方法，但是如果是要设置CSS样式，那么最好是编写CSS规则类来描述样式，然后再去改变元素的class。

var $h1 = $( "h1" );

$h1.addClass( "big" ); // 添加class

$h1.removeClass( "big" ); // 移除class

$h1.toggleClass( "big" );// 切换class，根据class是否存在以及第二参数决定添加或移除class

if ( $h1.hasClass( "big" ) ) { // 判断class是否包含“big”

}

     class也是非常有用的，可以存储元素的状态信息，例如元素是否被选择。

 

• 尺寸

    JQuery提供了一些很有用的方法来获取或设置一个元素的尺寸和位置。

// 设置所有元素的宽度

$( "h1" ).width( "50px" );

// 获取第一个元素的宽度

$( "h1" ).width();

// 设置所有元素的高度

$( "h1" ).height( "50px" );

// 获取第一个元素的高度

$( "h1" ).height();

// 返回一个对象包含了第一个元素的位置信息，相对于父节点的偏移

$( "h1" ).position();