知识学习——jQuery CSS操作

css()方法

定义：返回或设置匹配的元素的一个或多个样式属性。

//返回 CSS 属性
$(selector).css(name)
//name CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

//设置 CSS 属性
$(selector).css(name,value)
//value 规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。
//如果设置了空字符串值，则从元素中删除指定属性。

//使用函数来设置 CSS 属性
$(selector).css(name,function(index,value))
//例
$("button").click(function(){
    $("p").css("color",function(){return "red";});
});
//逐渐增加 div 的宽度：
$("div").click(function() {
    $(this).css("width", function(index, value) {
        return parseFloat(value) * 1.2;
        });
});

//设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})

{"color":"red","font-weight":"bold"}

height() 方法

定义：返回或设置匹配元素的高度。

$(selector).height();
$(selector).height(function(index,oldheight));

offset()方法

定义：返回或设置匹配元素相对于文档的偏移（位置）。

$(selector).offset(value);
//value 规定以像素计的top 和left坐标。可能的值：
//值对，比如 {top:100,left:0}
//带有 top 和 left 属性的对象
$(selector).offset(function(index,oldoffset))

offsetParent() 方法

定义：返回最近的祖先定位元素。定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

$(selector).offsetParent()

position() 方法

定义：返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

$(selector).position()

scrollLeft() 方法

定义：返回或设置匹配元素的滚动条的水平位置。滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

$(selector).scrollLeft(position)
//position 可选。规定以像素计的新位置。

scrollTop() 方法

定义：返回或设置匹配元素的滚动条的垂直位置。scroll top offset 指的是滚动条相对于其顶部的偏移。如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

$(selector).scrollTop(offset)
//offset 可选。规定相对滚动条顶部的偏移，以像素计。

width()方法

定义：返回或设置匹配元素的宽度

$(selector).width(length)
//length 规定元素的宽度。如果没有规定长度单位，则使用默认的 px 单位。