本文小編為大家詳細(xì)介紹“jquery如何設(shè)置元素的位置”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“jquery如何設(shè)置元素的位置”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
白堿灘ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
設(shè)置方法:1、用offset()設(shè)置元素相對于文檔的偏移坐標(biāo),語法“元素對象.offset({top:偏移值,left:偏移值})”;2、用scrollTop()設(shè)置元素垂直滾動條位置;3、用scrollLeft()設(shè)置元素水平滾動條位置。

本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
jquery設(shè)置元素位置的多種方法
1、使用offset()
offset() 方法可設(shè)置被選元素相對于文檔的偏移坐標(biāo)。
$(selector).offset({top:value,left:value})規(guī)定以像素為單位的 top 和 left 坐標(biāo)。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
p {
width:150px;
background-color:pink;
padding: 5px;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").offset({
top: 200,
left: 200
});
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<button>設(shè)置P元素的偏移坐標(biāo)</button>
</body>
</html>
2、使用scrollTop()
scrollTop() 方法可設(shè)置被選元素的垂直滾動條位置。
$(selector).scrollTop(position)
提示:當(dāng)滾動條位于最頂部時(shí),位置是 0。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollTop(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div><br>
<button>垂直滾動條的位置設(shè)置為100px</button>
</body>
</html>
3、使用使用scrollLeft()
scrollLeft() 可以設(shè)置匹配元素相對滾動條左側(cè)的偏移,即水平滾動條的位置。
$(selector).scrollLeft(position)
滾動條的水平位置指的是從其左側(cè)滾動過的像素?cái)?shù)。當(dāng)滾動條位于最左側(cè)時(shí),位置是 0。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollLeft(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>
<button>水平滾動條的位置設(shè)置為100 px</button>
</body>
</html>
讀到這里,這篇“jquery如何設(shè)置元素的位置”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題:jquery如何設(shè)置元素的位置
文章URL:http://www.chinadenli.net/article28/gccgjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、Google、網(wǎng)站收錄、小程序開發(fā)、云服務(wù)器、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)