首页 > 代码库 > jQuery慢慢啃之CSS(五)
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) );
jQuery慢慢啃之CSS(五)