jquery 操作css樣式、位置、尺寸方法匯總
一、CSS
1、css(name)
訪問(wèn)第一個(gè)匹配元素的樣式屬性。
返回值 String
參數(shù)
name (String) : 要訪問(wèn)的屬性名稱(chēng)
示例：
$("p").css("color"); //取得第一個(gè)段落的color樣式屬性的值
2、css(properties)
把一個(gè)“名/值對(duì)”對(duì)象設(shè)置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
返回值 jQuery
參數(shù)
properties (Map) : 要設(shè)置為樣式屬性的名/值對(duì)
示例：
//1 將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色
$("p").css({ color: "#ff0011", background: "blue" });
//2 如果屬性名包含 "-"的話，必須使用引號(hào)
$("p").css({ "margin-left": "10px", "background-color": "blue" });
3、css(name,value)
在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值。數(shù)字將自動(dòng)轉(zhuǎn)化為像素值
返回值 jQuery
參數(shù)
name (value) : 屬性名
value (String, Number) : 屬性值
示例：
$("p").css("color","red"); //將所有段落字體設(shè)為紅色
二、位置
1、offset()
獲取匹配元素在當(dāng)前視窗口的相對(duì)偏移。返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。
注意：此方法只對(duì)可見(jiàn)元素有效。
返回值 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()
獲取匹配元素相對(duì)父元素的偏移。
返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。為精確計(jì)算結(jié)果，請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對(duì)可見(jiàn)元素有效。
返回值 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()
獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。
注意：此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 Integer
示例：
/*
//獲取第一段相對(duì)滾動(dòng)條頂部的偏移
文檔片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("scrollTop:" + p.scrollTop());
4、scrollTop(val)
傳遞參數(shù)值時(shí)，設(shè)置滾動(dòng)條頂部偏移為該值。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 jQuery
示例：
$("div.demo").scrollTop(300);
5、scrollLeft()
獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 Integer
示例：
/*
//獲取第一段相對(duì)滾動(dòng)條左側(cè)的偏移
文檔片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("scrollLeft:" + p.scrollLeft());
6、scrollLeft(val)
傳遞參數(shù)值時(shí)，設(shè)置滾動(dòng)條左側(cè)偏移為該值。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 jQuery
示例：
$("div.demo").scrollLeft(300);
三、尺寸
1、height()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值（px）。在 jQuery 1.2 以后可以用來(lái)獲取 window 和 document 的高
返回值 Integer
示例：
/*
//獲取第一段的高
文檔片段：<p>Hello</p><p>2nd Paragraph</p>
*/
alert($("p").height());
//獲取文檔的高
alert($(document).height());
2、height(val)
為每個(gè)匹配的元素設(shè)置CSS高度(hidth)屬性的值。如果沒(méi)有明確指定單位（如：em或%），使用px。如果沒(méi)有明確指定單位（如：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 以后可以用來(lái)獲取 window 和 document 的寬
返回值 Integer
示例：0
/*
//獲取第一段的寬
文檔片段：<p>Hello</p><p>2nd Paragraph</p>
*/
alert($("p").width());
4、width(val)
為每個(gè)匹配的元素設(shè)置CSS寬度(width)屬性的值。如果沒(méi)有明確指定單位（如：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ǔ)白、不包括邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 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ǔ)白、不包括邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 Integer
示例：
/*
//獲取第一段落內(nèi)部區(qū)域?qū)挾?
文檔片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("innerWidth:" + p.innerWidth());
7、outerHeight(options)
獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 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ǔ)白和邊框）。此方法對(duì)可見(jiàn)和隱藏元素均有效。
返回值 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樣式、位置、尺寸的全部?jī)?nèi)容了，純屬是個(gè)人總結(jié)，如有遺漏或者錯(cuò)誤，還請(qǐng)大家告之，本文將持續(xù)更新。
相關(guān)文章
使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡的特效，效果十分不錯(cuò)，而且非常實(shí)用，有需要的小伙伴參考下吧。2015-03-03
基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼
這篇文章主要介紹了基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下2016-08-08
jQuery對(duì)JSON數(shù)據(jù)進(jìn)行排序輸出的方法
這篇文章主要介紹了jQuery對(duì)JSON數(shù)據(jù)進(jìn)行排序輸出的方法,涉及jQuery中g(shù)etJSON與sort等方法的使用技巧,需要的朋友可以參考下2015-06-06
setInterval與clearInterval的使用示例代碼
本篇主要是對(duì)setInterval與clearInterval的使用示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jQuery用戶(hù)頭像裁剪插件cropbox.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery用戶(hù)頭像裁剪插件cropbox.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶(hù)體驗(yàn)。減少了頁(yè)面加載的時(shí)間了，也減輕了服務(wù)器的壓力，就查了下用JQuery..2010-02-02
Jquery css函數(shù)用法(判斷標(biāo)簽是否擁有某屬性)
Jquery css函數(shù)用法(判斷標(biāo)簽是否擁有某屬性) ，需要的朋友可以參考下。2011-05-05
這篇文章主要介紹了jQuery 查找元素操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)頁(yè)面元素的各種常見(jiàn)查找操作實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
通過(guò)JQuery實(shí)現(xiàn)win8一樣酷炫的動(dòng)態(tài)磁貼效果(示例代碼)
相信大家喜歡這個(gè)界面無(wú)非也是喜歡它的動(dòng)態(tài)磁貼。剛好今天研究了一下如何通過(guò)JQuery在網(wǎng)頁(yè)上模仿這種效果，就貼出來(lái)給大家噴一下。雖然是一些很低級(jí)的技術(shù)，但是也希望有需要的朋友可以參考下2013-07-07