ホームページ > 記事 > ウェブフロントエンド > jqueryで要素の位置を設定する方法
jqueryで要素の位置を設定する方法
- 青灯夜游オリジナル
- 2022-05-26 14:25:372461ブラウズ
設定方法: 1. offset() を使用して、ドキュメントに対する要素のオフセット座標を設定します。構文は、「要素オブジェクト.offset({上: オフセット値, 左: オフセット値})」です。 ; 2. 要素の垂直スクロール バーの位置を設定するには、scrollTop() を使用します; 3. 要素の水平スクロール バーの位置を設定するには、scrollLeft() を使用します。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
#jquery で要素の位置を設定するさまざまな方法
1. offset() を使用します
offset() メソッドは、ドキュメントに対する選択された要素のオフセット座標を設定します。$(selector).offset({top:value,left:value})
- 上と左の座標をピクセル単位で指定します。
<!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>这是一个段落。</p>
<button>设置P元素的偏移坐标</button>
</body>
</html>
2.scrollTop()を使用します
scrollTop( ) メソッドは、選択した要素の垂直スクロール バーの位置を設定します。$(selector).scrollTop(position)ヒント: スクロール バーが上部にある場合、位置は 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>垂直滚动条的位置设置为100px</button>
</body>
</html>
3.scrollLeft()
scrollLeft() を使用します。スクロール バーの左側を基準とした一致する要素のオフセット、つまり水平スクロール バーの位置。$(selector).scrollLeft(position)スクロール バーの水平位置は、左側からスクロールされるピクセル数を指します。スクロールバーが左端にあるときの位置は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>水平滚动条的位置设置为100 px</button>
</body>
</html>
jQuery ビデオ チュートリアル、Web フロントエンド ビデオ]
以上がjqueryで要素の位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。