Wie positioniere ich einen DIV in bestimmten Koordinaten?

120

Ich möchte einen DIV in bestimmten Koordinaten positionieren. Wie kann ich das mit Javascript machen?

Adham
quelle

Antworten:

170

Schreiben Sie seine leftund topEigenschaften als die Anzahl der Pixel vom linken bzw. oberen Rand. Es muss habenposition: absolute;

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

Oder tun Sie es als Funktion, damit Sie es an ein Ereignis wie anhängen können 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';
}
Michael Berkowski
quelle
Ich rufe die x, y-Koordinaten per Mausklick ab. Wie kann ich das Div an der Position der Maus anzeigen?
Adham
@adham hast du schon die x, y koordinaten? Wenden Sie sie einfach anstelle von x_pos,y_pos
Michael Berkowski
es rundet die Position immer ab ... ist es möglich, Position wie 1.6 zu setzen, anstatt 2 oder 1 zu werden.
Muhammad Umer
Was ist, wenn wir Koordinaten haben (x1, y2) (x2, y2) (x3, y3) (x4, y4)?
John Dey
Ich mache genau das Gleiche, aber mein Div wird nicht in der Nähe der Koordinate meiner Maus positioniert. Es bewegt sich jedoch an die oberste Startposition der Hauptseite nach der Kopfzeile. Ich meine den Meister Div. Kann mir jemand helfen zu verstehen warum?
JNPW
32

Sie müssen dazu kein Javascript verwenden. Verwenden von einfachem altem CSS:

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

Wenn Sie der Meinung sind, dass Sie Javascript verwenden müssen oder dies dynamisch mithilfe von JQuery versuchen, wirkt sich dies auf alle Divs der Klasse "blah" aus:

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

Wenn Sie alternativ altes Javascript verwenden müssen, können Sie alternativ nach ID greifen

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
Dave
quelle
Was? Sie sollten .class anstelle von myElement und top & left anstelle von x & y verwenden, nicht wahr?
TMS
Zusätzlich zum Abrufen eines Verweises auf ein HTML-Element mit document.getElemtentById()können Sie es auch mit einem beliebigen jQuery-ähnlichen Selektor mit document.querySelector () und seinen vielen Variationen
referenzieren
9

Nun, es hängt davon ab, ob Sie nur ein Div positionieren möchten und dann nichts anderes. Sie müssen dafür kein Java-Skript verwenden. Sie können dies nur durch CSS erreichen. Was zählt, ist relativ zu dem Container, in dem Sie Ihr Div positionieren möchten. Wenn Sie es relativ zum Dokumentkörper positionieren möchten, muss Ihr Div absolut positioniert sein und sein Container darf nicht relativ oder absolut positioniert sein. In diesem Fall wird Ihr Div positioniert relativ zum Container.

Andernfalls können Sie mit Jquery die Methode offset () verwenden, wenn Sie ein Element relativ zum Dokument positionieren möchten.

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

wenn relativ zur versetzten übergeordneten Position die übergeordnete relative oder absolute. dann benutze folgendes ...

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
quelle
Tolles @Ehtesham Es hat mir wirklich geholfen.
RN Kushwaha
2

Sie können auch die positionsfeste CSS-Eigenschaft verwenden.

<!-- 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
Pankaj Bisht
quelle
2

Hier ist ein richtig beschriebener Artikel und auch ein Beispiel mit Code. JS-Koordinaten

Gemäß Anforderung. unten ist Code, der zuletzt in diesem Artikel veröffentlicht wird. Sie müssen die Funktion getOffset aufrufen und das HTML-Element übergeben, das die oberen und linken Werte zurückgibt .

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)
    }
}
Sanket Patel
quelle
0

Ich habe das abgeschnitten und das 'px' hinzugefügt; Funktioniert sehr gut.

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 ; 
Greggo
quelle