如何在特定坐标中定位 DIV?

IT技术 javascript html coordinates
2021-03-02 16:36:34

我想在特定坐标中定位 DIV 吗?我怎样才能使用 Javascript 做到这一点?

6个回答

将其lefttop属性分别编写为距左边缘和上边缘的像素数。它必须有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';
}
它总是围绕位置......是否可以将位置设置为 1.6 而不是变成 2 或 1。
2021-04-27 16:36:34
@adham 你已经有了 x,y 坐标?只需应用它们代替x_posy_pos
2021-04-30 16:36:34
如果我们有坐标, (x1,y2)(x2,y2)(x3,y3)(x4,y4) 呢?
2021-05-08 16:36:34
我从鼠标单击中检索 x,y 坐标,如何在鼠标位置显示 Div?
2021-05-10 16:36:34
我正在做完全相同的事情,但我的 div 没有定位在鼠标坐标附近。然而,它移动到页眉之后主页的顶部起始位置。我的意思是主 Div。有人可以帮我理解为什么吗?
2021-05-11 16:36:34

您不必使用 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
什么?你应该使用 .class 而不是 myElement 和 top & left 而不是 x & y,不是吗?
2021-05-17 16:36:34
除了使用 获取对 HTML 元素的引用之外document.getElemtentById(),您还可以使用具有document.querySelector()及其许多变体的任意类似 jQuery 的选择器来引用它
2021-05-19 16:36:34

好吧,这取决于您是否只想定位一个 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
});
伟大的@Ehtesham 它真的帮助了我。
2021-05-11 16:36:34

这是一篇正确描述的文章以及带有代码的示例。 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)
    }
}

您还可以使用位置固定的 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