jQuery 包含便捷的方法取得和设置元素的 CSS 属性。
CSS 属性通常包含一个连字符而在 JavaScript 中是
camel cased 形式。比如, CSS
属性 font-size 在 JavaScript 表示为 fontSize。
Example 3.19. Setting CSS properties
$('h1').css('fontSize', '100px'); // 设置一个属性
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 设置多个属性
参数样式的注释我们将放在第二行 -- 一个对象将包含多个属性。这是传递多个参数到函数的通用方法，更多 jQuery setter 方法接受对象一次性设置多个值。
作为一个 getter, $.fn.css 方法是有价值的;
然而, 通常要避免在产品代码中使用 setter, 因为你不想要在你的 JavaScript 中包含展示信息。相反，为类写CSS规则用以描述各种虚拟状态，简单的改变你需要影响的元素的类。
Example 3.20. 使用类
var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }
类用于存储元素的状态信息时也非常有用，比如表明选择的元素。
jQuery 提供了多个方法来获得和修改元素的大小和位置信息。
Example 3.21, “基本尺寸方法” 的代码简单描述了 jQuery 的尺寸功能； 若要获得有关jQuery尺寸方法完整的信息，请访问http://api.jquery.com/category/dimensions/.
Example 3.21. 基本尺寸方法
$('h1').width('50px'); // 设置所有H1元素的宽度
$('h1').width(); // 获得第一个H1元素的宽度
$('h1').height('50px'); // 设置所有H1元素的高度
$('h1').height(); // 获得第一个H1元素的高度
$('h1').position(); // 返回对象的坐标位置
// 相对于第一个H1的信息
// 它的父类偏移位置
Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.