jQuery — CSS 操作

一、CSS 样式

　　1、CSS(name | prp |[,val|fn])

　　　　语法：

说明：访问或设置匹配元素的样式属性

参数：name：要访问的属性名称

　　    properties：要设置为样式属性的名/值对

　　　name,value：属性名，属性值

　　    name,function(index,value) ：1属性名；2此函数返回要设置的属性值，接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值

　　Demo：

//取得第一个段落的color样式属性的值。
$("p").css("color");

//将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });

//将所有段落字体设为红色
$("p").css("color","red");

二、位置

　　1、offset([coordinates])

　　　　用法：

说明：获取/设置匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left，以像素计。此方法只对可见元素有效

参数：coordinates{top,left} 值对，比如{top:100,left:0} 带有 top 和 left 属性的对象

　　　　Demo：

//获取最后一段的偏移
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

//设置最后一段的偏移
$("p:last").offset({ top: 10, left: 30 });

　　2、position()

　　　　语法：

说明：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

　　　　Demo：

// 获取第一段的偏移
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

　　3、scrollTop([val])

　　　　用法：

说明：获取/设置匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效

　　　　Demo：

//获取第一段相对滚动条顶部的偏移
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

//设置相对滚动条顶部的偏移
$("div.demo").scrollTop(300);

　　4、scrollLeft([val])

　　　　用法：

说明：获取/设置匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。

　　　　Demo：

//获取第一段相对滚动条左侧的偏移
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

//设置相对滚动条左侧的偏移
$("div.demo").scrollLeft(300);

三、尺寸

　　1、height([val | fn])

　　　　用法：

说明：获取/设置匹配元素的高度值（px）

　　　　Demo：

//获取第一段的高
$("p").height();

//把所有段落的高设为 20:
$("p").height(20);

　　2、width([val | fn])

　　　　用法：

说明：获取/设置匹配的元素的狂赌之（px）

　　　　Demo :

//获取第一段的宽
$("p").width();

//把所有段落的宽设为 20:
$("p").width(20);

　　3、innerHeight()

　　　　用法：

说明：获取匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

　　　　Demo：

//获取第一段落内部区域高度。
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

　　4、innerWidth()

　　　　用法：

说明：获取匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效

　　　　Demo：

//获取第一段落内部区域宽度。
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

　　5、outerHeight([options])

　　　　用法：

说明：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。

参数：options 为 true时，计算外边距（margin）在内

　　　　Demo：

//获取第一段落外部高度。
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

　　6、outerWidth([options])

　　　　用法：

说明：获取第一个匹配元素外部宽度（默认包括补白和边框），此方法对可见和隐藏元素均有效。

参数：options 设置为 true，计算外边距（margin）在内

　　　　Demo：

//获取第一段落外部宽度。
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );