jQuery慢慢啃之CSS,六

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性

$("p").css("color");//获取

$("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置

$("p").css("color","red");//单个设置

$("div").click(function() {//函数形式设置

$(this).css({

width: function(index, value) {

return parseFloat(value) * 1.2;

},

height: function(index, value) {

return parseFloat(value) * 1.2;

}

});

});

2.jQuery.cssHooks//直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。

3.offset([coordinates])//获取匹配元素在当前视口的相对偏移

<p>Hello</p><p>2nd Paragraph</p>


var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );


<p>Hello</p><p>left: 0, top: 35</p>

$("p:last").offset({ top: 10, left: 30 });//获取相对值

4.position()//获取匹配元素相对父元素的偏移。

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

5.scrollTop([val])//获取匹配元素相对滚动条顶部的偏移

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移,不一定是浏览器

6.scrollLeft([val])//获取匹配元素相对滚动条左侧的偏移

var p = $("p:first");

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

$("div.demo").scrollLeft(300);

7.height([val|fn])//取得匹配元素当前计算的高度值

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

$("p").height(20);

8.width([val|fn])//取得第一个匹配元素当前计算的宽度值(px)。

9.innerHeight()//获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

var p = $("p:first");

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

10.innerWidth()//获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

var p = $("p:first");

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

11.outerHeight([options])//获取第一个匹配元素外部高度(默认包括补白和边框)。

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

12.outerWidth([options])//获取第一个匹配元素外部宽度(默认包括补白和边框)。

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