【发布时间】：2011-10-11 18:58:03
【问题描述】：
我想将 DIV 定位在特定坐标中？如何使用 Javascript 做到这一点？
【问题讨论】：
标签： javascript html coordinates
【发布时间】：2011-10-11 18:58:03
【问题描述】：
将其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 你已经有了 x,y 坐标？只需用它们代替
x_pos,y_pos -
它总是将位置四舍五入...是否可以将位置设置为 1.6 而不是变成 2 或 1。
-
如果我们有坐标 (x1,y2)(x2,y2)(x3,y3)(x4,y4) 怎么办？
-
我正在做同样的事情，但我的 div 没有定位在鼠标坐标附近。但是，它会在页眉之后移动到主页的顶部起始位置。我的意思是主Div。有人可以帮我理解为什么吗？
您不必使用 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
【讨论】：
-
什么？你应该使用 .class 而不是 myElement 和 top & left 而不是 x & y，不是吗？
-
除了使用
document.getElemtentById()获取对 HTML 元素的引用之外，您还可以使用带有 document.querySelector() 及其多种变体的任意类 jQuery 选择器来引用它
这取决于您是否只想定位一个 div 而不需要其他任何东西，您不需要为此使用 java 脚本。您只能通过 CSS 来实现这一点。重要的是相对于您要放置 div 的容器，如果您想相对于文档主体定位它，那么您的 div 必须绝对定位，并且它的容器不能相对或绝对定位，在这种情况下，您的 div 将被定位相对于容器。
如果你想相对于文档定位一个元素，你可以使用 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 它真的帮助了我。
这是一篇正确描述的文章，也是一个带有代码的示例。 JS coordinates
根据要求。下面是那篇文章最后发布的代码。 需要调用 getOffset 函数并传递返回其 top 和 left 值的 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)
}
}
【讨论】：
您也可以使用位置固定的 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
【讨论】：
要设置 div 的内容，您可以使用以下命令：
document.getElementById(id).style.top = "0px";
document.getElementById(id).style.left = "0px";
在 jQuery 中存在其他不错的替代品
【讨论】：
我抄袭了这个并添加了“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 ;
【讨论】：