Javascript 如何在特定坐标系中定位DIV？

我想在特定坐标系中定位一个DIV？如何使用Javascript实现这一点？

您不必使用Javascript实现这一点。 使用普通的旧css：

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

如果您觉得必须使用javascript，或者正在尝试动态地使用javascript 使用JQuery，这会影响类“blah”的所有div：

或者，如果您必须使用常规的旧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

属性分别编写为左边缘和上边缘的像素数。必须有

位置：绝对

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，并且其容器不能相对或绝对定位，在这种情况下，div将相对于容器定位

否则，对于Jquery，如果要相对于文档定位元素，可以使用offset（）方法

如果相对于偏移父位置，则父位置为相对或绝对。然后使用下面的

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


/*css代码*/
.盒子{
位置：固定；
}
//js代码
document.getElementById（'myElement'）.style.top=0//或者别的什么
document.getElementById（'myElement'）.style.left=0；//或者别的什么
这是一篇正确描述的文章，也是一个代码示例。

按照要求。下面是那篇文章最后发布的代码。
需要调用getOffset函数并传递返回其top和left值的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 ; 

什么？您应该使用.class而不是myElement，使用top&left而不是x&y，是吗？除了使用
document.getElemtentById（）
获取对HTML元素的引用外，您还可以使用任意jQuery之类的选择器及其多个变量来引用它。我通过单击鼠标来检索x，y坐标，如何在鼠标位置显示Div？@adham你已经有了x，y坐标了吗？只要用它们来代替x_pos

，

y_pos

它总是围绕着位置……是否可以将位置设置为1.6而不是2或1。如果我们有坐标，（x1，y2）（x2，y2）（x3，y3）（x4，y4）呢？我正在做完全相同的事情，但我的div没有靠近我鼠标的坐标。但是，它会移动到页眉后主页的顶部起始位置。我的意思是主管部门。有人能帮我理解为什么吗？太好了@Ehtesham它真的帮助了我。

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)
    }
}

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 ;