ホームページ > 記事 > ウェブフロントエンド > jQuery の offset() メソッドと Sharing_jquery の例についての簡単な説明
jQuery の offset() メソッドと Sharing_jquery の例についての簡単な説明
- WBOYオリジナル
- 2016-05-16 15:49:57912ブラウズ
offset() メソッドの定義と使用法:
このメソッドは、ドキュメント オブジェクトに対する一致した要素のオフセットを返すか、設定します。
文法構造 1:
$(セレクター).offset()
現在のドキュメント内の一致する要素の相対オフセットを取得します。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。
このメソッドは、表示されている要素に対してのみ機能します。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.father{
border:1px solid black;
width:400px;
height:300px;
padding:10px;
margin:50px;
}
.children{
height:150px;
width:200px;
margin-left:50px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
a=$(".children").offset();
alert("元素的偏移量坐标是："+a.top+"|"+a.left+"");
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>
上記のコードは、ドキュメントを基準としたサブディビジョンのオフセットをポップアップ表示できます。
文法構造 2:
$(セレクター).offset(値)
ドキュメント オブジェクトを基準にして、一致する要素の座標を設定します。
offset() メソッドを使用すると、要素の位置をリセットできます。この要素の位置はドキュメント オブジェクトを基準としています。
オブジェクトの元の位置スタイル属性が静的である場合、再配置を実装するために相対に変更されます。
パラメータリスト:
パラメータの説明
value は、上と左の座標をピクセル単位で指定します。
可能な値:
1. {top:200,left:10} などの値のペア。
2. top 属性と left 属性を持つオブジェクト。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
border:1px solid black;
width:400px;
height:300px;
}
.children{
height:150px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".children").offset({top:100,left:100})
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>
上記のコードは、ドキュメントに対する相対的な div のオフセットを設定できます。
文法構造 3:
関数の戻り値を使用してオフセット座標を設定します:
$(selector).offset(function(index,oldoffset))
パラメータリスト:
パラメータの説明
function(index,oldvalue) は、選択した要素の新しいオフセット座標を返す関数を指定します:
インデックス - オプション。要素のインデックス。
oldvalue - オプション。現在の座標。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
border:1px solid black;
width:400px;
height:300px;
}
.children{
height:150px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".children").offset(function(a,b){
var newpoint= new Object();
newpoint.top=b.top+50;
newpoint.left=b.left+50;
return newpoint;
})
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>
上記のコードは要素のオフセットを設定することもできますが、値は関数を通じて返されます。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。