web-dev-qa-db-fra.com

Comment positionner une DIV dans des coordonnées spécifiques?

Je veux positionner une DIV dans une coordonnée spécifique? Comment puis-je faire cela en utilisant Javascript?

javascripthtmlcoordinates
93
Adham

Script ses propriétés left et top en tant que le nombre de pixels du bord gauche et du bord supérieur respectivement. Il doit avoir position: absolute;

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

Ou faites-le comme une fonction pour pouvoir l'attacher à un événement comme 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';
}
140
Michael Berkowski

Vous n'avez pas à utiliser Javascript pour faire cela .

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

Si vous pensez que vous devez utiliser JavaScript ou si vous essayez de le faire de façon dynamique L'utilisation de JQuery affecte tous les divs de la classe "blah": 

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

Alternativement, si vous devez utiliser old-javascript classique, vous pouvez le récupérer par identifiant

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
31
dave

cela dépend si tout ce que vous voulez est de positionner un div et rien d’autre, vous n’avez pas besoin d’utiliser un script Java pour cela. Vous pouvez y parvenir uniquement par CSS. Ce qui compte est relatif au conteneur dans lequel vous souhaitez positionner votre div. Si vous souhaitez le positionner par rapport au corps du document, votre div doit être positionné de manière absolue et son conteneur ne doit pas être positionné de manière relative ou absolue. par rapport au conteneur.

Sinon, avec Jquery, si vous souhaitez positionner un élément par rapport au document, vous pouvez utiliser la méthode offset ().

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

si relatif par rapport à la position parent, le parent ou absolu du parent puis utilisez ce qui suit ...

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
});
8
Ehtesham

Vous pouvez également utiliser la propriété css position fixed.

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

Voici un article correctement décrit et un exemple avec le code . JS coordonnées

Selon l'exigence. Vous trouverez ci-dessous le code qui est enfin affiché dans cet article . Il est nécessaire d'appeler la fonction getOffset et de transmettre l'élément HTML qui renvoie ses valeurs top et left.

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
Sanket Patel

J'ai écrit ceci et ajouté le '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 ;
0
Greggo