如何在特定坐标中定位DIV?
我想定位一个DIV在一个特定的坐标? 我怎样才能使用JavaScript?
将它的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'; }
你不必使用Javascript来做到这一点。 使用普通的css:
div.blah { position:absolute; top: 0; /*[wherever you want it]*/ left:0; /*[wherever you want it]*/ }
如果你觉得你必须使用JavaScript,或者试图dynamic使用JQuery,这会影响类“blah”的所有div:
$('.blah').css('position', 'absolute'); $('.blah').css('top', 0); //or wherever you want it $('.blah').css('left', 0); //or wherever you want it
或者,如果您必须使用常规的旧JavaScript,您可以通过ID来抓取
document.getElementById('myElement').style.position = "absolute"; document.getElementById('myElement').style.top = 0; //or whatever document.getElementById('myElement').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元素。
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' } }`enter code here` to call: //Gets it to the right side el.style.top = getOffset(othis).top ; el.style.left = getOffset(othis).left ;