Làm thế nào để định vị một DIV trong một tọa độ cụ thể?

Tôi muốn đặt DIV ở một tọa độ cụ thể? Làm thế nào tôi có thể làm điều đó bằng cách sử dụng Javascript?

Tập lệnh leftvà topthuộc tính của nó là số pixel từ cạnh trái và cạnh trên tương ứng. Nó phải cóposition: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

Hoặc làm nó như một hàm để bạn có thể đính kèm nó vào một sự kiện như 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';
}

Bạn không cần phải sử dụng Javascript để làm điều này. Sử dụng css cũ thuần túy:

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

Nếu bạn cảm thấy mình phải sử dụng javascript hoặc đang cố gắng thực hiện điều này động Sử dụng JQuery, điều này ảnh hưởng đến tất cả các div của lớp "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

Ngoài ra, nếu bạn phải sử dụng javascript cũ thông thường, bạn có thể lấy bằng 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

Và nó phụ thuộc nếu tất cả những gì bạn muốn là định vị một div và sau đó không có gì khác, bạn không cần phải sử dụng java script cho việc đó. Bạn chỉ có thể đạt được điều này bằng CSS. Điều quan trọng là liên quan đến vùng chứa nào bạn muốn định vị div của mình, nếu bạn muốn định vị nó so với nội dung tài liệu thì div của bạn phải được định vị tuyệt đối và vùng chứa của nó không được định vị tương đối hoặc tuyệt đối, trong trường hợp đó div của bạn sẽ được định vị so với thùng chứa.

Ngược lại với Jquery nếu bạn muốn định vị một phần tử so với tài liệu, bạn có thể sử dụng phương thức offset ().

$(".mydiv").offset({ top: 10, left: 30 });

nếu tương đối để bù đắp vị trí cha thì tương đối hoặc tuyệt đối của cha. sau đó sử dụng sau ...

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

Bạn cũng có thể sử dụng thuộc tính css cố định vị trí.

<!-- 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

Đây là một bài viết được mô tả đúng và cũng là một mẫu có mã. Tọa độ JS

Theo yêu cầu. dưới đây là mã được đăng cuối cùng trong bài viết đó. Cần gọi hàm getOffset và truyền phần tử html trả về các giá trị trên cùng và bên trái của nó .

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

Tôi đã đóng cái nôi này và thêm 'px'; Hoạt động rất tốt.

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 ;