juqery 學(xué)習(xí)之六 CSS--css、位置、寬高
更新時間:2011年02月11日 02:02:46 作者:
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高,需要的朋友可以參考下。
css(name)
訪問第一個匹配元素的樣式屬性。
--------------------------------------------------------------------------------
Return a style property on the first matched element.
返回值
String
參數(shù)
name (String) : 要訪問的屬性名稱
示例
取得第一個段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一個“名/值對”對象設(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è)置為樣式屬性的名/值對
示例
將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色。
jQuery 代碼:
$("p").css({ color: "#ff0011", background: "blue" });
--------------------------------------------------------------------------------
如果屬性名包含 "-"的話,必須使用引號:
jQuery 代碼:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中,設(shè)置一個樣式屬性的值。
數(shù)字將自動轉(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)前視口的相對偏移。
返回的對象包含兩個整形屬性:top 和 left。此方法只對可見元素有效。
--------------------------------------------------------------------------------
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()
取得第一個匹配元素當(dāng)前計算的高度值(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()
取得第一個匹配元素當(dāng)前計算的寬度值(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);
訪問第一個匹配元素的樣式屬性。
--------------------------------------------------------------------------------
Return a style property on the first matched element.
返回值
String
參數(shù)
name (String) : 要訪問的屬性名稱
示例
取得第一個段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一個“名/值對”對象設(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è)置為樣式屬性的名/值對
示例
將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色。
jQuery 代碼:
$("p").css({ color: "#ff0011", background: "blue" });
--------------------------------------------------------------------------------
如果屬性名包含 "-"的話,必須使用引號:
jQuery 代碼:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中,設(shè)置一個樣式屬性的值。
數(shù)字將自動轉(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)前視口的相對偏移。
返回的對象包含兩個整形屬性:top 和 left。此方法只對可見元素有效。
--------------------------------------------------------------------------------
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()
取得第一個匹配元素當(dāng)前計算的高度值(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()
取得第一個匹配元素當(dāng)前計算的寬度值(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短信驗(yàn)證倒計時功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了jQuery短信驗(yàn)證倒計時功能實(shí)現(xiàn)方法,實(shí)例分析了jQuery前臺倒計時功能及ajax交互的相關(guān)技巧,需要的朋友可以參考下2016-05-05jquery中的$(document).ready()與window.onload的區(qū)別
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.2009-11-11jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下2015-01-01仿中關(guān)村在線首頁彈出式廣告插件(jQuery版)
仿中關(guān)村在線首頁彈出式廣告插件(jQuery版) ,需要的朋友可以參考下2012-05-05JQuery中如何傳遞參數(shù)如click(),change()等具體實(shí)現(xiàn)
有個需求讓兩個select中option相互轉(zhuǎn)換,這個作業(yè)就是給幾個按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)2013-04-04jQuery實(shí)現(xiàn)新聞播報滾動及淡入淡出效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)新聞播報滾動及淡入淡出效果,結(jié)合實(shí)例形式分析了基于jQuery插件的頁面元素動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-03-03BootStrap下jQuery自動完成的樣式調(diào)整
這篇文章主要介紹了BootStrap下jQuery自動完成的樣式調(diào)整的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05