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


Answers:


170

将其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';
}

我通过单击鼠标来检索x,y坐标,如何在鼠标的位置显示Div?
Adham

@adham您已经有了x,y坐标?只要应用它们来代替x_posy_pos
迈克尔Berkowski

其四舍五入位置总是...是有可能设定位置像1.6而不是将其变成2或1
穆罕默德乌默尔

如果我们有坐标(x1,y2)(x2,y2)(x3,y3)(x4,y4)怎么办?
John dey

我正在做完全相同的事情,但是我的div的位置没有靠近鼠标的坐标。但是,它移动到页眉后首页的顶部开始位置。我是说师傅 有人可以帮我理解为什么吗?
JNPW

32

您不必使用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,不是吗?
TMS

除了使用引用HTML元素外document.getElemtentById(),您还可以使用带有document.querySelector()及其许多变化形式的类似jQuery的选择器对其进行引用
Shammel Lee

9

好吧,这取决于您是否只想放置一个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
});

太棒了@Ehtesham它真的帮助了我。
RN库什瓦哈2015年

2

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

2

这是一篇经过适当描述的文章,也是一个带有代码的示例。 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)
    }
}

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 ; 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.