getBoundingClientRectの説明
2022-03-20 18:14:55
getBoundingClientRectは、ビューポートに対する要素の相対的な位置のセットを取得するために使用されます。
1. シンタックス このメソッドは引数を持ちません。
rectObject = object.getBoundingClientRect()
2. 戻り値の種類 TextRectangle オブジェクト。各矩形は、矩形の座標をピクセル単位で表す 4 つの整数プロパティ (top, right, bottom, and left) を持ちます。
rectObject.top: 要素の上端からビューポートの上端までの距離です。
rectObject.right: 要素の右側からビューポートの左側までの距離。
rectObject.bottom: 要素の下端からビューポートの上端までの距離です。
rectObject.left: 要素の左側からビューポートの左側までの距離です。
rectObject.width: 要素の幅 (IE9+),(IE6-8、rectObject.right - rectObject.left)。
rectObject.height: 要素の高さ (IE9+),(IE6-8、rectObject.bottom - rectObject.top)
3. ie6以上との互換性
4. IE7- 左と上に2ピクセルずつ余分なピクセルがあります。
解決方法
var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
rectRight = rectObject.right - document.documentElement.clientLeft || 2;
rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
rectTop = rectObject.top - document.documentElement.clientTop || 2;
参考:http://www.cnblogs.com/Songyc/p/4458570.html
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ハートビート・エフェクトのためのHTML+CSS
-
HTML ホテル フォームによるフィルタリング
-
HTML+cssのボックスモデル例(円、半円など)「border-radius」使いやすい
-
HTMLテーブルのテーブル分割とマージ(colspan, rowspan)
-
ランダム・ネームドロッパーを実装するためのhtmlサンプルコード
-
Html階層型ボックスシャドウ効果サンプルコード
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
sublime / vscodeショートカットHTMLコード生成の実装
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
html のリストボックス、テキストフィールド、ファイルフィールドのコード例