6 ответов:
сценарий его
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';или сделать это как функцию, так что вы можете прикрепить его к событию как
onmousedownfunction 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'; }
вы не должны использовать Javascript, чтобы сделать это. Используя обычный старый css:
div.blah { position:absolute; top: 0; /*[wherever you want it]*/ left:0; /*[wherever you want it]*/ }Если вы чувствуете, что должны использовать javascript, или пытаетесь сделать это динамически Используя JQuery, это влияет на все дивы класса "бла":
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
ну это зависит, если все, что вы хотите, это разместить 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 });
вы также можете использовать фиксированное свойство 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
вот правильно описанная статья, а также пример с кодом. координаты JS
согласно требованию. ниже приведен код, который размещен, наконец, в этой статье. Нужно позвонить getOffset функция и передать html элемент, который возвращает его top и левый значения.
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) } }
я списал это и добавил '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 ;
Comments