Javascript 如何在特定坐标中定位 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6802956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a DIV in a specific coordinates?
提问by Adham
I want to position a DIV in a specific coordinates ? How can I do that using Javascript ?
我想在特定坐标中定位 DIV 吗？我怎样才能使用 Javascript 做到这一点？
回答by Michael Berkowski
Script its leftand topproperties as the number of pixels from the left edge and top edge respectively. It must have position: absolute;
将其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';
Or do it as a function so you can attach it to an event like onmousedown
或者把它作为一个函数来做，这样你就可以把它附加到一个事件上，比如 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';
}
回答by dave
You don't have to use Javascript to do this. Using plain-old css:
您不必使用 Javascript 来执行此操作。使用普通的 css：
div.blah {
position:absolute;
top: 0; /*[wherever you want it]*/
left:0; /*[wherever you want it]*/
}
If you feel you must use javascript, or are trying to do this dynamically Using JQuery, this affects all divs of class "blah":
如果您觉得必须使用 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
Alternatively, if you must use regular old-javascript you can grab by id
或者，如果您必须使用常规的 old-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
回答by Ehtesham
well it depends if all you want is to position a div and then nothing else, you don't need to use java script for that. You can achieve this by CSS only. What matters is relative to what container you want to position your div, if you want to position it relative to document body then your div must be positioned absolute and its container must not be positioned relatively or absolutely, in that case your div will be positioned relative to the container.
好吧，这取决于您是否只想定位一个 div 而不是其他任何东西，您不需要为此使用 java 脚本。您只能通过 CSS 来实现这一点。重要的是相对于您想要定位 div 的容器，如果您想相对于文档正文定位它，那么您的 div 必须绝对定位，并且它的容器不能相对或绝对定位，在这种情况下，您的 div 将被定位相对于容器。
Otherwise with Jquery if you want to position an element relative to document you can use offset() method.
否则对于 Jquery，如果你想相对于文档定位一个元素，你可以使用 offset() 方法。
$(".mydiv").offset({ top: 10, left: 30 });
if relative to offset parent position the parent relative or absolute. then use following...
如果相对于偏移父位置父相对或绝对。然后使用以下...
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
});
回答by Pankaj Bisht
You can also use position fixed css property.
您还可以使用位置固定的 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
回答by Sanket Patel
Here is a properly described article and also a sample with code. JS coordinates
这是一篇正确描述的文章，也是一个带有代码的示例。 JS坐标
As per requirement. below is code which is posted at last in that article. Need to call getOffsetfunction and pass html element which returns its topand leftvalues.
根据要求。下面是该文章中最后发布的代码。需要调用 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)
}
}
回答by Greggo
I cribbed this and added the 'px'; Works very well.
我抄了这个并添加了“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 ;
