jQuery の offset() メソッドと Sharing_jquery の例についての簡単な説明

WBOY
リリース: 2016-05-16 15:49:57
オリジナル
940 人が閲覧しました

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>

ログイン後にコピー

上記のコードは要素のオフセットを設定することもできますが、値は関数を通じて返されます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!