样式

使用jQuery，无论是设置或者获取元素样式都十分简便。

// 支持驼峰式和分割线式，两种方式等价(原生JavaScript只支持驼峰式）

$('h1').css('fontSize');

$('h1').css('font-size');

//设置样式

$('h1').css('fontSize', '100px');

//设置多个样式

$('h1').css({

	fontSize: '100px',

	color: 'red'

});

其实设置多个元素时，给.css()传入的参数是一个对象，也可以这样：

var options = {

	fontSize: '100px',

	color: 'red'

};

$('h1').css(options);

客户端分为三层：

• HTML-结构层
• CSS-表现层
• JavaScript-行为层

通常来说，建议使用.css()只用来获取样式，而不用来设置样式。因为使用.css()来设置样式破坏了客户端的三层结构，即在行为层混合了表现层的代码。

最好是定义一系列的CSS类，然后用jQuery给元素增加删除CSS类：

var $h1 = $('h1');

$h1.addClass('big');

$h1.removeClass('big');

$h1.toggleClass('big');

if ($h1.hasClass('big')) {

	//do something...

}

另外，也可以用jQuery来调整元素的尺寸、位置

//设置

$('h1').width('80px');

//获取

var width = $('h1').width();	 //80

//获取位置, 返回一个包含元素位置信息的对象

$('h1').position();