jquery操作css样式、位置、尺寸方法汇总
一、CSS
1、css(name)
访问第一个匹配元素的样式属性。
返回值String
参数
name(String):要访问的属性名称
示例：
$("p").css("color");//取得第一个段落的color样式属性的值
2、css(properties)
把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
返回值jQuery
参数
properties(Map):要设置为样式属性的名/值对
示例：
//1将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css({color:"#ff0011",background:"blue"});
//2如果属性名包含"-"的话，必须使用引号
$("p").css({"margin-left":"10px","background-color":"blue"});
3、css(name,value)
在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值
返回值jQuery
参数
name(value):属性名
value(String,Number):属性值
示例：
二、位置 1、offset() 获取匹配元素在当前视窗口的相对偏移。返回的对象包含两个整形属性：top和left。 2、position() 获取匹配元素相对父元素的偏移。 3、scrollTop() 获取匹配元素相对滚动条顶部的偏移。 4、scrollTop(val) 传递参数值时，设置滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。 5、scrollLeft() 获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。 6、scrollLeft(val) 传递参数值时，设置滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。 三、尺寸 1、height() 取得第一个匹配元素当前计算的高度值（px）。在jQuery1.2以后可以用来获取window和document的高 2、height(val) 为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。如果没有明确指定单位（如：em或%），使用px。 3、width() 取得第一个匹配元素当前计算的宽度值（px）。在jQuery1.2以后可以用来获取window和document的宽 4、width(val) 为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。 5、innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 7、innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 7、outerHeight(options) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 8、outerHeight(options) 获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 以上便是jQuery操作CSS样式、位置、尺寸的全部内容了，纯属是个人总结，如有遗漏或者错误，还请大家告之，本文将持续更新。
$("p").css("color","red");//将所有段落字体设为红色
注意：此方法只对可见元素有效。
返回值Object{top,left}
示例：
/*
//获取第二段的偏移
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:last");
varoffset=p.offset();
p.html("left:"+offset.left+",top:"+offset.top);
返回的对象包含两个整形属性：top和left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
返回值Object{top,left}
示例：
/*
//获取第一段的偏移
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
varposition=p.position();
$("p:last").html("left:"+position.left+",top:"+position.top);
注意：此方法对可见和隐藏元素均有效。
返回值Integer
示例：
/*
//获取第一段相对滚动条顶部的偏移
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("scrollTop:"+p.scrollTop());
返回值jQuery
示例：
$("div.demo").scrollTop(300);
返回值Integer
示例：
/*
//获取第一段相对滚动条左侧的偏移
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("scrollLeft:"+p.scrollLeft());
返回值jQuery
示例：
$("div.demo").scrollLeft(300);
返回值Integer
示例：
/*
//获取第一段的高
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
alert($("p").height());
//获取文档的高
alert($(document).height());
返回值jQuery
参数
val(String,Number):设定CSS中"height"的值
示例：
/*
//把所有段落的高设为20
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
$("p").height(20);
alert($("p").height());
返回值Integer
示例：0
/*
//获取第一段的宽
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
alert($("p").width());
返回值jQuery
参数
val(String,Number):设定CSS"width"的属性值
示例：
/*
//将所有段落的宽设为20
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
$("p").width(20);
alert($("p").width());
返回值Integer
示例：
/*
//获取第一段落内部区域高度
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("innerHeight:"+p.innerHeight());
返回值Integer
示例：
/*
//获取第一段落内部区域宽度
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("innerWidth:"+p.innerWidth());
返回值Integer
参数
options(Boolean):(false) 设置为true时，计算边距在内。
示例：
/*
//获取第一段落外部高度
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("outerHeight:"+p.outerHeight()+",outerHeight(true):"+p.outerHeight(true));
返回值Integer
参数
options(Boolean):(false) 设置为true时，计算边距在内。
示例：
/*
//获取第一段落外部宽度
文档片段：<p>Hello</p><p>2ndParagraph</p>
*/
varp=$("p:first");
$("p:last").text("outerWidth:"+p.outerWidth()+",outerWidth(true):"+p.outerWidth(true));
相关文章