juqery 學(xué)習(xí)之六 CSS--css、位置、寬高
更新時(shí)間:2011年02月11日 02:02:46 作者:
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高,需要的朋友可以參考下。
css(name)
訪問第一個(gè)匹配元素的樣式屬性。
--------------------------------------------------------------------------------
Return a style property on the first matched element.
返回值
String
參數(shù)
name (String) : 要訪問的屬性名稱
示例
取得第一個(gè)段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一個(gè)“名/值對(duì)”對(duì)象設(shè)置為所有匹配元素的樣式屬性。
這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
--------------------------------------------------------------------------------
Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
返回值
jQuery
參數(shù)
properties (Map) : 要設(shè)置為樣式屬性的名/值對(duì)
示例
將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色。
jQuery 代碼:
$("p").css({ color: "#ff0011", background: "blue" });
--------------------------------------------------------------------------------
如果屬性名包含 "-"的話,必須使用引號(hào):
jQuery 代碼:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中,設(shè)置一個(gè)樣式屬性的值。
數(shù)字將自動(dòng)轉(zhuǎn)化為像素值
--------------------------------------------------------------------------------
Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
返回值
jQuery
參數(shù)
name (value) : 屬性名
value (String, Number) : 屬性值
示例
將所有段落字體設(shè)為紅色
jQuery 代碼:
$("p").css("color","red");
-------------------------------------------------------------------------------------------------------------------------------------------------
offset()
獲取匹配元素在當(dāng)前視口的相對(duì)偏移。
返回的對(duì)象包含兩個(gè)整形屬性:top 和 left。此方法只對(duì)可見元素有效。
--------------------------------------------------------------------------------
Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.
返回值
Object{top,left}
示例
獲取第二段的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
結(jié)果:
<p>Hello</p><p>left: 0, top: 35</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
height()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值(px)。
在 jQuery 1.2 以后可以用來獲取 window 和 document 的高
--------------------------------------------------------------------------------
Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.
返回值
Integer
示例
獲取第一段的高
jQuery 代碼:
$("p").height();
--------------------------------------------------------------------------------
獲取文檔的高
jQuery 代碼:
$(document).height();
把所有段落的高設(shè)為 20:
jQuery 代碼:
$("p").height(20);
-------------------------------------------------------------------------------------------------------------------------------------------------
width()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值(px)。
在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬
--------------------------------------------------------------------------------
Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.
返回值
Integer
示例
獲取第一段的寬
jQuery 代碼:
$("p").width();
--------------------------------------------------------------------------------
獲取當(dāng)前窗口的寬
jQuery 代碼:
$(window).width();
將所有段落的寬設(shè)為 20:
jQuery 代碼:
$("p").width(20);
訪問第一個(gè)匹配元素的樣式屬性。
--------------------------------------------------------------------------------
Return a style property on the first matched element.
返回值
String
參數(shù)
name (String) : 要訪問的屬性名稱
示例
取得第一個(gè)段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一個(gè)“名/值對(duì)”對(duì)象設(shè)置為所有匹配元素的樣式屬性。
這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。
--------------------------------------------------------------------------------
Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
返回值
jQuery
參數(shù)
properties (Map) : 要設(shè)置為樣式屬性的名/值對(duì)
示例
將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色。
jQuery 代碼:
$("p").css({ color: "#ff0011", background: "blue" });
--------------------------------------------------------------------------------
如果屬性名包含 "-"的話,必須使用引號(hào):
jQuery 代碼:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中,設(shè)置一個(gè)樣式屬性的值。
數(shù)字將自動(dòng)轉(zhuǎn)化為像素值
--------------------------------------------------------------------------------
Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
返回值
jQuery
參數(shù)
name (value) : 屬性名
value (String, Number) : 屬性值
示例
將所有段落字體設(shè)為紅色
jQuery 代碼:
$("p").css("color","red");
-------------------------------------------------------------------------------------------------------------------------------------------------
offset()
獲取匹配元素在當(dāng)前視口的相對(duì)偏移。
返回的對(duì)象包含兩個(gè)整形屬性:top 和 left。此方法只對(duì)可見元素有效。
--------------------------------------------------------------------------------
Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.
返回值
Object{top,left}
示例
獲取第二段的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
結(jié)果:
<p>Hello</p><p>left: 0, top: 35</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
height()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值(px)。
在 jQuery 1.2 以后可以用來獲取 window 和 document 的高
--------------------------------------------------------------------------------
Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.
返回值
Integer
示例
獲取第一段的高
jQuery 代碼:
$("p").height();
--------------------------------------------------------------------------------
獲取文檔的高
jQuery 代碼:
$(document).height();
把所有段落的高設(shè)為 20:
jQuery 代碼:
$("p").height(20);
-------------------------------------------------------------------------------------------------------------------------------------------------
width()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值(px)。
在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬
--------------------------------------------------------------------------------
Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.
返回值
Integer
示例
獲取第一段的寬
jQuery 代碼:
$("p").width();
--------------------------------------------------------------------------------
獲取當(dāng)前窗口的寬
jQuery 代碼:
$(window).width();
將所有段落的寬設(shè)為 20:
jQuery 代碼:
$("p").width(20);
您可能感興趣的文章:
相關(guān)文章
jQuery利用cookie 實(shí)現(xiàn)本地收藏功能(不重復(fù)無需多次命名)
cookie 是存儲(chǔ)于訪問者計(jì)算機(jī)中的變量。這篇文章主要介紹了jQuery利用cookie 實(shí)現(xiàn)本地收藏功能不重復(fù)無需多次命名,需要的朋友可以參考下2019-11-11
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常,但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11
jQuery中:first-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:first-child選擇器用法,實(shí)例分析了:first-child選擇器的功能、定義及匹配父元素的第一個(gè)子元素的用法技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)簡(jiǎn)單彈出框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)簡(jiǎn)單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實(shí)很好用,有很多需求都是要彈出框,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
jQuery實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法,涉及jQuery響應(yīng)鼠標(biāo)事件及針對(duì)頁(yè)面元素的樣式與字符串正則操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
SuperSlide標(biāo)簽切換、焦點(diǎn)圖多種組合插件
SuperSlide 是致力于實(shí)現(xiàn)網(wǎng)站統(tǒng)一特效調(diào)用的函數(shù),能解決大部分標(biāo)簽切換、焦點(diǎn)圖切換等效果,還能多個(gè)slide組合創(chuàng)造更多的效果。(兼容ie內(nèi)核(包括無敵的 ie6)、webkit內(nèi)核、ff、opera等主流瀏覽器)。2015-03-03
jquery圖片不完全按比例自動(dòng)縮小的簡(jiǎn)單代碼
開發(fā)前期用自動(dòng)生產(chǎn) 固定大小的圖片 進(jìn)行 顯示,發(fā)現(xiàn)不能滿足,在前期的時(shí)候把保存了原圖,現(xiàn)在只能顯示原圖,原圖由于上傳時(shí)候沒有做任何限制所有要使用 圖片不完全按比例縮小,下面是代碼2013-07-07
jQuery實(shí)現(xiàn)伸展與合攏panel的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)伸展與合攏panel的方法,可實(shí)現(xiàn)操作div層的平滑收縮與展開的功能,涉及jQuery中next、slideUp、slideDown等方法的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-04-04

