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（六）

相关文章