如何定位一个 DIV 在一个特定的坐标？

我想定位一个 DIV 在一个特定的坐标? 我如何才能做到这一点使用 Javascript？

422298 次浏览
小开

您不必使用 Javascript 来完成此操作。 使用普通的 css:

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

如果您觉得必须使用 javascript，或者正在尝试动态地这样做 通过使用 JQuery，这会影响到所有 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
小开
最佳答案

将它的 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';
}
小开

这取决于你是否只想定位一个 div 然后什么都不做，你不需要使用 java 脚本。您只能通过 CSS 来实现这一点。重要的是相对于你想要放置你的 div 的容器，如果你想要放置它相对于文档主体，那么你的 div 必须放置在绝对位置，它的容器不能放置在相对或绝对位置，在这种情况下你的 div 将会放置在相对于容器的位置。

否则，如果您想定位相对于文档的元素，使用 Jquery 可以使用 offest ()方法。

$(".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 元素，该元素返回其 头儿和 左边值。

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 ;
小开

要设置 div 的内容，可以使用以下方法:

   document.getElementById(id).style.top = "0px";
document.getElementById(id).style.left = "0px";

JQuery 中还有其他不错的替代方案


提交答案