Как разместить DIV в определенных координатах?

120

Я хочу разместить DIV в определенных координатах? Как я могу это сделать с помощью Javascript?

Adham
источник

Ответы:

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
@adham у вас уже есть координаты x, y? Просто примените их вместо x_pos,y_pos
Майкл Берковски
он всегда округляет позицию ... можно ли установить позицию типа 1.6 вместо того, чтобы она становилась 2 или 1.
Мухаммад Умер
что, если у нас есть координаты, (x1, y2) (x2, y2) (x3, y3) (x4, y4)?
John
Я делаю то же самое, но мой div не располагается рядом с кординатом моей мыши. Однако он перемещается в верхнюю начальную позицию главной страницы после заголовка. Я имею ввиду мастер Div. Может кто-нибудь помочь мне понять, почему?
JNPW
32

Для этого не обязательно использовать Javascript. Используя старый добрый CSS:

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

Если вы чувствуете, что должны использовать javascript или пытаетесь сделать это динамически с помощью JQuery, это влияет на все div класса «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

В качестве альтернативы, если вам необходимо использовать обычный старый javascript, вы можете получить его по идентификатору

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
Дейв
источник
что? вы должны использовать .class вместо myElement и top & left вместо x & y, не так ли?
TMS
Помимо получения ссылки на элемент HTML с помощью document.getElemtentById(), вы также можете ссылаться на него с помощью произвольного селектора, подобного jQuery, с помощью document.querySelector () и его множества вариаций
Шаммел Ли
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 Kushwaha
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 ; 
Greggo
источник