特定の座標にDIVを配置する方法?


回答:


170

左端と上端からのピクセル数として、leftそれぞれのtopプロパティとプロパティをスクリプト化します。持っているに違いないposition: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

または、関数として実行して、次のようなイベントにアタッチできます。 onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

マウスクリックからx、y座標を取得しますが、マウスの位置にDivを表示するにはどうすればよいですか?
Adham 2011

@adhamあなたはすでにx、y座標を持っていますか?ちょうどの代わりにそれらを適用x_posy_pos
マイケルBerkowski

常に位置を丸めます...位置を2または1にする代わりに1.6のように設定することは可能ですか
Muhammad Umer 2014年

座標がある場合(x1、y2)(x2、y2)(x3、y3)(x4、y4)?
John dey

まったく同じことをしていますが、divがマウスの座標の近くに配置されません。ただし、ヘッダーの後、メインページの先頭の開始位置に移動します。私はマスターDivを意味します。誰かが理由を理解するのを手伝ってくれる?
JNPW

32

これを行うためにJavaScriptを使用する必要はありません。昔ながらのcssを使う:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

javascriptを使用する必要があると感じる場合、またはJQueryを使用してこれを動的に実行しようとしている場合、これは「blah」クラスのすべてのdivに影響します。

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

または、通常の古いJavaScriptを使用する必要がある場合は、IDで取得できます。

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever

何?myElementの代わりに.classを使用し、x&yの代わりにtop&leftを使用する必要がありますか?
TMS 2011

を使用してHTML要素への参照を取得することに加えてdocument.getElemtentById()document.querySelector()を使用して任意のjQueryのようなセレクターおよびその多くのバリエーションで参照することもできます
Shammel Lee

9

まあそれはあなたが望むのはdivを配置することだけで、それ以外には何もないかどうかに依存します。そのためにJavaスクリプトを使用する必要はありません。これはCSSでのみ実現できます。重要なのは、divを配置するコンテナーに関連しています。ドキュメントボディに相対して配置する場合は、divを絶対に配置し、コンテナーを相対または絶対に配置しないでください。その場合、divは配置されます。コンテナに対する相対。

それ以外の場合、jqueryで要素をドキュメントに対して相対的に配置したい場合は、offset()メソッドを使用できます。

$(".mydiv").offset({ top: 10, left: 30 });

オフセット親に相対的な場合は、親の相対または絶対位置。次に以下を使用します...

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

$('.mydiv').css({
  position:'absolute',
  top:top,
  left:left
});

素晴らしい@Ehteshamそれは本当に私を助けました。
RNクシュワハ2015年

2

位置固定のcssプロパティを使用することもできます。

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

2

これは適切に記述された記事とコード付きのサンプルです。 JS座標

要件ごと。以下はその記事でついに投稿されたコードです。getOffset 関数を呼び出して、その左の値を返すhtml要素を渡す必要が あります。

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

0

これをクリビして「px」を追加しました。とてもうまくいきます。

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ; 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.