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

Question

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

javascripthtmlcoordinates

156

我想在特定的坐标上定位一个DIV，使用JavaScript该怎么做？

- Adham

7个回答

42

您不必使用JavaScript来完成这个操作。只需使用普通CSS即可：

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

如果你认为必须使用JavaScript，或者正在尝试使用jQuery进行动态操作，这将影响所有类名为“blah”的

元素：

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

- dave

什么？你应该使用.class而不是myElement，并且使用top和left而不是x和y，不是吗？ - Tomas

1

除了使用document.getElementById()获取HTML元素的引用之外，您还可以使用任意类似于jQuery的选择器和document.querySelector()及其多种变体来引用它。 - Shammel Lee

要求是从JavaScript中进行设置，所以这个答案并不帮助。 - Predrag Manojlovic

9

如果你只想定位一个div而不需要其他操作，那么你不需要使用JavaScript，只需使用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

太棒了 @Ehtesham，真的帮了我很多。 - RN Kushwaha

3

以下是一篇关于it技术的文章和相关代码示例。 JS坐标根据要求，以下是该文章末尾发布的代码。需要调用 getOffset 函数并传递HTML元素，该函数将返回其 top 和 left 值。

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

- Sanket Patel

看起来有点复杂。 - David Spector

2

你还可以使用position fixed 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

- Pankaj Bisht

2

为了设置 div 的内容，您可以使用以下方式：

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

在jQuery中还存在其他好的替代品

- user16901036

0

我抄袭了这个并且加上了“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 ;

- Greggo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Berkowski · Accepted Answer

脚本使用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';
}