张贴在使用jQuery核心
CSS, 样式跟尺寸
jQueryJQuery提供了一个处理方法，可以获得或设定元素的CSS属性。
|
1
2
3
4
5
|
// 获得 CSS 属性$( "h1" ).css( "fontSize" ); // 传回一个像是"19px"的字串$( "h1" ).css( "font-size" ); // 同上 |
|
1
2
3
4
5
6
7
8
9
|
// 设定 CSS 属性$( "h1" ).css( "fontSize", "100px" ); // 设定一个属性// 设定多个属性$( "h1" ).css({ fontSize: "100px", color: "red"}); |
[adsense][/adsense]
需要注意的是，设置多个属性的时候，参数是一个物件，这个物件包含了多个属性。JQuery的setter方法接收这样的物件作为参数可以一次完成多属性的设定工作。
CSS属性在JavaScript中一般需要符合驼峰式大小写的命名规则在单字之间以连接号来连结，例如，CSS 属性font-size在JavaScript中被用来表示fontSize，然而，这个方式不适用在传递CSS属性名称字串到.css()方法中 – 在这个案例中不论是驼峰式大小写的方式或是连接号都可以使用。
不建议在生产就绪的程式码中使用.css()来设定值，但是在物件中传递设定CSS时，CSS属性要使用驼峰式大小写而不是使用连接号的方式来进行。
link使用CSS类别来样式化
作为取质的方法，.css()方法很有用，然而，应该避免在生产就绪的程式码中使用设定值的方法，因为一般最好是不让表达的资讯放到JavaScript程式码中，最好改成撰写CSS的类别规则来描述不同的视觉状态，然后在元素上改变其类别。
|
1
2
3
4
5
6
7
8
9
10
11
|
// Working with classes.var h1 = $( "h1" );h1.addClass( "big" );h1.removeClass( "big" );h1.toggleClass( "big" );if ( h1.hasClass( "big" ) ) { ...} |
类别在储存元素的状态资讯也是有用的，像是元素是否被选取。
link尺寸
jQuery提供了很多方法来取得跟修改元素的尺寸跟位置资讯。
下面的程式码显示jQuery尺寸相关函式的概念，详细关于jQuery尺寸方法的资讯参阅api.jquery.com上的尺寸文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 基本的尺寸方法// 设定所有<h1>元素的宽度$( "h1" ).width( "50px" );// 取得第一个<h1>元素的宽度$( "h1" ).width();// 设定所有<h1>元素的高度$( "h1" ).height( "50px" );// 取得第一个<h1>元素的高度$( "h1" ).height();// 传回第一个<h1>相对于它的"父节点偏移"的位置物件资讯$( "h1" ).position(); |