1.列表
jQuery CSS 操作函数
下面列出的这些方法设置或返回元素的 CSS 相关属性。
CSS 属性 | 描述 |
---|---|
css() | 设置或返回匹配元素的样式属性。 |
height() | 设置或返回匹配元素的高度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
width() | 设置或返回匹配元素的宽度。 |
2.jQuery CSS 操作 - css() 方法
实例
设置 <p> 元素的颜色:
$(".btn1").click(function(){
$("p").css("color","red");
});
定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
返回 CSS 属性值
返回第一个匹配元素的 CSS 属性值。
注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。
$(selector).css(name)
参数 | 描述 |
---|---|
name | 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。 |
实例
取得第一个段落的 color 样式属性的值:
$("p").css("color")
;
设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css(name,value)
参数 | 描述 |
---|---|
name | 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。 |
value | 可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值,比如 "red"。 如果设置了空字符串值,则从元素中删除指定属性。 |
实例
将所有段落的颜色设为红色:
$("p").css("color","red")
;
使用函数来设置 CSS 属性
设置所有匹配的元素中样式属性的值。
此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。
$(selector).css(name,function(index,value))
参数 | 描述 |
---|---|
name | 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。 |
function(index,value) | 规定返回 CSS 属性新值的函数。
|
实例 1
将所有段落的颜色设为红色:
$("button").click(function(){
$("p").css("color",function(){return "red";})
;
});
实例 2
逐渐增加 div 的宽度:
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});
设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})
把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
参数 | 描述 |
---|---|
{property:value} | 必需。规定要设置为样式属性的“名称/值对”对象。 该参数可包含若干对 CSS 属性名称/值。比如 {"color":"red","font-weight":"bold"} |
实例
$("p").css({ "color":"white", "background-color":"#98bf21", "font-family":"Arial", "font-size":"20px", "padding":"5px" });
3.jQuery CSS 操作 - height() 方法
实例
设置 <p> 元素的高度:
$(".btn1").click(function(){
$("p").height(50);
});
定义和用法
height() 方法返回或设置匹配元素的高度。
返回高度
返回第一个匹配元素的高度。
如果不为该方法设置参数,则返回以像素计的匹配元素的高度。
语法
$(selector).height()
设置高度
设置所有匹配元素的高度。
语法
$(selector).height(length)
参数 | 描述 |
---|---|
length | 可选。规定元素的高度。 如果没有规定长度单位,则使用默认的 px 单位。 |
使用函数来设置高度
使用函数来设置所有匹配元素的高度。
语法
$(selector).height(function(index,oldheight))
参数 | 描述 |
---|---|
function(index,oldheight) | 规定返回被选元素新高度的函数。
|
4.jQuery CSS 操作 - offset() 方法
实例
获得 <p> 元素当前的偏移:
$(".btn1").click(function(){
x=$("p").offset()
;
$("#span1").text(x.left);
$("#span2").text(x.top);
});
定义和用法
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
返回偏移坐标
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
语法
$(selector).offset()
设置偏移坐标
设置所有匹配元素的偏移坐标。
语法
$(selector).offset(value)
参数 | 描述 |
---|---|
value | 必需。规定以像素计的 top 和 left 坐标。 可能的值:
|
使用函数来设置偏移坐标
使用函数来设置所有匹配元素的偏移坐标。
语法
$(selector).offset(function(index,oldoffset))
参数 | 描述 |
---|---|
function(index,oldoffset) | 规定返回被选元素新偏移坐标的函数。
|
5.jQuery CSS 操作 - offsetParent() 方法
实例
设置最近的祖先定位元素的背景颜色:
$("button").click(function(){
$("p").offsetParent()
.css("background-color","red");
});
定义和用法
offsetParent() 方法返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
可以通过 jQuery 设置 position,或者通过 CSS 的 position 属性。
语法
$(selector).offsetParent()
6.jQuery CSS 操作 - position() 方法
实例
获得 <p> 元素的当前位置:
$(".btn1").click(function(){
x=$("p").position()
;
$("#span1").text(x.left);
$("#span2").text(x.top);
});
定义和用法
position() 方法返回匹配元素相对于父元素的位置(偏移)。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。
此方法只对可见元素有效。
语法
$(selector).position()
7.jQuery CSS 操作 - scrollLeft() 方法
实例
设置 <div> 元素中滚动条的水平偏移:
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
定义和用法
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。
返回水平滚动条位置
返回第一个匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft()
设置水平滚动条位置
设置所有匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft(position)
参数 | 描述 |
---|---|
position | 可选。规定以像素计的新位置。 |
8.jQuery CSS 操作 - scrollTop() 方法
实例
设置 <div> 元素中滚动条的垂直偏移:
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
语法
$(selector).scrollTop(offset)
参数 | 描述 |
---|---|
offset | 可选。规定相对滚动条顶部的偏移,以像素计。 |
提示和注释
注释:该方法对于可见元素和不可见元素均有效。
注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。
注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。
9.jQuery CSS 操作 - width() 方法
实例
设置 <p> 元素的宽度:
$(".btn1").click(function(){
$("p").width(200);
});
定义和用法
width() 方法返回或设置匹配元素的宽度。
返回宽度
返回第一个匹配元素的宽度。
如果不为该方法设置参数,则返回以像素计的匹配元素的宽度。
语法
$(selector).width()
设置宽度
设置所有匹配元素的宽度。
语法
$(selector).width(length)
参数 | 描述 |
---|---|
length | 可选。规定元素的宽度。 如果没有规定长度单位,则使用默认的 px 单位。 |
使用函数来设置宽度
使用函数来设置所有匹配元素的宽度。
语法
$(selector).width(function(index,oldwidth))
参数 | 描述 |
---|---|
function(index,oldwidth) | 规定返回被选元素新宽度的函数。
|