jquery 操作css樣式、位置、尺寸方法匯總

字號:


    一、CSS
    1、css(name)
    訪問第一個(gè)匹配元素的樣式屬性。
    返回值 String
    參數(shù)
    name (String) : 要訪問的屬性名稱
    示例:
    代碼如下:
    $("p").css("color"); //取得第一個(gè)段落的color樣式屬性的值
    2、css(properties)
    把一個(gè)“名/值對”對象設(shè)置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
    返回值 jQuery
    參數(shù)
    properties (Map) : 要設(shè)置為樣式屬性的名/值對
    示例:
    代碼如下:
    //1 將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色
    $("p").css({ color: "#ff0011", background: "blue" });
    //2 如果屬性名包含 "-"的話,必須使用引號
    $("p").css({ "margin-left": "10px", "background-color": "blue" });
    3、css(name,value)
    在所有匹配的元素中,設(shè)置一個(gè)樣式屬性的值。數(shù)字將自動轉(zhuǎn)化為像素值
    返回值 jQuery
    參數(shù)
    name (value) : 屬性名
    value (String, Number) : 屬性值
    示例:
    代碼如下:
    $("p").css("color","red"); //將所有段落字體設(shè)為紅色
    二、位置
    1、offset()
    獲取匹配元素在當(dāng)前視窗口的相對偏移。返回的對象包含兩個(gè)整形屬性:top 和 left。
    注意:此方法只對可見元素有效。
    返回值 Object{top,left}
    示例:
    代碼如下:
    /*
    //獲取第二段的偏移
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:last");
    var offset = p.offset();
    p.html("left: " + offset.left + ", top: " + offset.top);
    2、position()
    獲取匹配元素相對父元素的偏移。
    返回的對象包含兩個(gè)整形屬性:top 和 left。為精確計(jì)算結(jié)果,請?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
    返回值 Object{top,left}
    示例:
    代碼如下:
    /*
    //獲取第一段的偏移
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    var position = p.position();
    $("p:last").html("left: " + position.left + ", top: " + position.top);
    3、scrollTop()
    獲取匹配元素相對滾動條頂部的偏移。
    注意:此方法對可見和隱藏元素均有效。
    返回值 Integer
    示例:
    代碼如下:
    /*
    //獲取第一段相對滾動條頂部的偏移
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("scrollTop:" + p.scrollTop());
    4、scrollTop(val)
    傳遞參數(shù)值時(shí),設(shè)置滾動條頂部偏移為該值。此方法對可見和隱藏元素均有效。
    返回值 jQuery
    示例:
    代碼如下:
    $("div.demo").scrollTop(300);
    5、scrollLeft()
    獲取匹配元素相對滾動條左側(cè)的偏移。此方法對可見和隱藏元素均有效。
    返回值 Integer
    示例:
    代碼如下:
    /*
    //獲取第一段相對滾動條左側(cè)的偏移
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("scrollLeft:" + p.scrollLeft());
    6、scrollLeft(val)
    傳遞參數(shù)值時(shí),設(shè)置滾動條左側(cè)偏移為該值。此方法對可見和隱藏元素均有效。
    返回值 jQuery
    示例:
    代碼如下:
    $("div.demo").scrollLeft(300);
    三、尺寸
    1、height()
    取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值(px)。在 jQuery 1.2 以后可以用來獲取 window 和 document 的高
    返回值 Integer
    示例:
    代碼如下:
    /*
    //獲取第一段的高
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    alert($("p").height());
    //獲取文檔的高
    alert($(document).height());
    2、height(val)
    為每個(gè)匹配的元素設(shè)置CSS高度(hidth)屬性的值。如果沒有明確指定單位(如:em或%),使用px。如果沒有明確指定單位(如:em或%),使用px。
    返回值 jQuery
    參數(shù)
    val (String, Number) : 設(shè)定CSS中 'height' 的值
    示例:
    代碼如下:
    /*
    //把所有段落的高設(shè)為 20
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    $("p").height(20);
    alert($("p").height());
    3、width()
    取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值(px)。在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬
    返回值 Integer
    示例:0
    代碼如下:
    /*
    //獲取第一段的寬
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    alert($("p").width());
    4、width(val)
    為每個(gè)匹配的元素設(shè)置CSS寬度(width)屬性的值。如果沒有明確指定單位(如:em或%),使用px。
    返回值 jQuery
    參數(shù)
    val (String, Number) : 設(shè)定 CSS 'width' 的屬性值
    示例:
    代碼如下:
    /*
    //將所有段落的寬設(shè)為 20
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    $("p").width(20);
    alert($("p").width());
    5、innerHeight()
    獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度(包括補(bǔ)白、不包括邊框)。此方法對可見和隱藏元素均有效。
    返回值 Integer
    示例:
    代碼如下:
    /*
    //獲取第一段落內(nèi)部區(qū)域高度
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("innerHeight:" + p.innerHeight());
    7、innerWidth()
    獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框)。此方法對可見和隱藏元素均有效。
    返回值 Integer
    示例:
    代碼如下:
    /*
    //獲取第一段落內(nèi)部區(qū)域?qū)挾?BR>    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("innerWidth:" + p.innerWidth());
    7、outerHeight(options)
    獲取第一個(gè)匹配元素外部高度(默認(rèn)包括補(bǔ)白和邊框)。此方法對可見和隱藏元素均有效。
    返回值 Integer
    參數(shù)
    options(Boolean) : (false) 設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。
    示例:
    代碼如下:
    /*
    //獲取第一段落外部高度
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true));
    8、outerHeight(options)
    獲取第一個(gè)匹配元素外部寬度(默認(rèn)包括補(bǔ)白和邊框)。此方法對可見和隱藏元素均有效。
    返回值 Integer
    參數(shù)
    options(Boolean) : (false) 設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。
    示例:
    代碼如下:
    /*
    //獲取第一段落外部寬度
    文檔片段:<p>Hello</p><p>2nd Paragraph</p>
    */
    var p = $("p:first");
    $("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true));
    以上便是jQuery操作CSS樣式、位置、尺寸的全部內(nèi)容了,純屬是個(gè)人總結(jié),如有遺漏或者錯誤,還請大家告之,本文將持續(xù)更新。