ホームページ > ウェブフロントエンド > jsチュートリアル > jquery はブラウザ内の要素の位置をどのように取得しますか?

jquery はブラウザ内の要素の位置をどのように取得しますか?

云罗郡主
リリース: 2018-10-29 15:36:40
転載
3081 人が閲覧しました

jquery はブラウザ内の要素の位置をどのように取得しますか? jqueryに触れたばかりの友人の中には、このような疑問を持つ人も多いと思います。この章では、jquery がブラウザ内の要素の位置を取得する方法を紹介します。その方法は何ですか?困っている友人は参考にしていただければ幸いです。

1. オブジェクトを取得します (新しいウィンドウ参照要素を開くためのカスタム調整)

var obj = $(”#oButton”);
ログイン後にコピー

この例では、取得したオブジェクトはポップアップ ウィンドウ ボタンなので、新しいウィンドウが開きます。ボタンの位置に基づいて作成されます。インスタンス内に作成された新しいウィンドウの右下隅にボタンが表示されるように調整します。

2. オブジェクト要素の位置を取得します (offset() メソッド)

var offset = obj.offset();
ログイン後にコピー

オブジェクト要素の位置 (要素の上部と左端) を取得します。呼び出しメソッドは次のとおりです。 : offset.left と offset.top で、現在のオブジェクトの左と上の位置を知ることができます。

3. オブジェクト要素の幅を取得する(width()メソッド)

var right = offset.left+obj.width();
ログイン後にコピー

例では、オブジェクトの右下隅の位置と、オブジェクト要素の左端の位置を取得します。新しいウィンドウが作成されます。

4. オブジェクト要素の高さの取得(height()メソッド)

var down = offset.top+obj.height();
ログイン後にコピー

例では、オブジェクトの右下隅の位置と、オブジェクトの上部の位置を取得しています。新しいウィンドウが作成されます。

5. CSS スタイルを定義し、左と上をそれぞれ設定します。

‘left’:right,
‘top’:down,
ログイン後にコピー

CSS スタイルのマージンとパディングの値、およびブラウザ IE と Firefox の互換性に注意してください。

上記の例と組み合わせると、組み込みメソッド offset()、width()、height() を使用して、jQuery が要素の位置、高さ、幅を取得するのが非常に簡単になります。動的調整と新しいウィンドウを開く機能 他の拡張アプリケーションの場合も同様で、jQuery の要素の位置、高さ、幅を取得する方法を理解すると、新しい要素を作成したり、要素の位置とサイズを調整したりする場合に非常に実用的になります。

上記は、jquery がブラウザー内の要素の位置を取得する方法についての完全な紹介です。 JavaScript ビデオ チュートリアルについて詳しく知りたい場合は、どのような方法がありますか?, PHP 中国語 Web サイトにご注意ください。


以上がjquery はブラウザ内の要素の位置をどのように取得しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:lvyestudy.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート