第五章 jQuery之CSS

5.1 CSS

1.css(name|pro|[,val|fn])

访问匹配元素的样式属性。

得到第一个p标签的颜色。console.log($('p:first').css('color'));

设置所有p标签的文本颜色为red。$('p').css('color','red');

设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px).

$('p:eq(1)').css({

color: '#ff0011',

background: 'blue',

width: 300,

height: 30

});

5.2位置

1. offset([coordinates])

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

获取第二段的偏移

varp = $("p:last");

varoffset = p.offset();

p.html("left: " + offset.left + ", top: " + offset.top );

2. position()

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

获取第一段的偏移。

varp = $("p:first");

varposition = p.position();

$("p:last").html("left: " + position.left + ", top: " + position.top );

3. scrollTop([val])

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

读取/设置滚动条的Y坐标

读取页面滚动条的Y坐标(兼容chrome和IE)

$(document.body).scrollTop()+$(document.documentElement).scrollTop();

滚动到指定位置(兼容chrome和IE).$('body,html').scrollTop(60);

4. scrollLeft([val])

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

获取第一段相对滚动条左侧的偏移。

varp = $("p:first");

$("p:last").text("scrollLeft:" + p.scrollLeft() );

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

5.3尺寸

1.height([val|fn])

取得匹配元素当前计算的高度值（px）。

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

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

2.width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。

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

3. innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

varp = $("p:first");

$("p:last").text("innerHeight:" + p.innerHeight() );

4. innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

varp = $("p:first");

$("p:last").text("innerWidth:" + p.innerWidth() );

5.outerHeight([options])

获取第一个匹配元素外部高度（默认包括补白和边框）。

获取第一段落外部高度

varp = $("p:first");

$("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):"+ p.outerHeight(true) );

6.outerWidth([options])

获取第一个匹配元素外部宽度（默认包括补白和边框）。

获取第一段外部宽度。

varp = $("p:first");

$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" +p.outerWidth(true) );