Answers:
将其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_pos
,y_pos
您不必使用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
或者,如果您必须使用常规的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
document.getElemtentById()
,您还可以使用带有document.querySelector()及其许多变化形式的类似jQuery的选择器对其进行引用
好吧,这取决于您是否只想放置一个div,然后别无其他,您无需为此使用Java脚本。您只能通过CSS来实现。重要的是相对于要放置div的容器,如果要相对于文档主体放置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元素。
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)
}
}