[解決済み] div/spanタグの位置を取得する
2022-09-27 13:07:21
質問
誰か
top
&です。
left
の位置は
div
または
span
要素が指定されていない場合は?
ie:
<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>
上記の中で、もし私が
document.getElementById('11a').style.top
の値は
55px
が返されます。しかし、もし私がそれを
span
'12a'に対してそれを試すと、何も返されません。
私はたくさんの
div
/
span
を指定できないページで
top
/
left
のプロパティを表示させたいのですが、そのためには
div
をその要素の直下に表示する必要があります。
どのように解決するのですか?
この関数は、ページに対する要素の x,y 位置を表示します。基本的には、すべての要素の親をループアップし、それらのオフセットを一緒に追加する必要があります。
function getPos(el) {
// yay readability
for (var lx=0, ly=0;
el != null;
lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
return {x: lx,y: ly};
}
しかし、コンテナに対する要素のx,yの相対位置が欲しいだけであれば、必要なのは
var x = el.offsetLeft, y = el.offsetTop;
この要素の直下に要素を置くには、その高さも知っておく必要があります。これはoffsetHeight/offsetWidthプロパティに格納されています。
var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] Promise : then vs then + catch [重複].
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする