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

Question

Tôi muốn định vị một DIV trong 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?

Answer 1

Script của nó left và top thích tương ứng với số lượng pixel từ cạnh trái và cạnh trên cù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 điều đó như một chức năng để bạn có thể gắn 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'; 
} 

Answer 2

Bạn không phải sử dụng Javascript để thực hiện việc này. Sử dụng css đồng bằng tuổi:

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

Nếu bạn cảm thấy bạn phải sử dụng javascript, hoặc đang cố gắng để làm điều này tự động Sử dụng JQuery, điều này ảnh hưởng đến tất cả các div của lớp "blah":

$('.blah').css('position', 'absolute'); 
$('.blah').css('top', 0); //or wherever you want it 
$('.blah').css('left', 0); //or wherever you want it 

Ngoài ra, nếu bạn phải sử dụng thường xuyên cũ javascript bạn có thể lấy bằng id

document.getElementById('myElement').style.position = "absolute"; 
document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever 

Answer 3

tốt nó phụ thuộc nếu tất cả các bạn muốn là để xác định vị trí một div và sau đó không có gì khác , bạn không cần phải sử dụng tập lệnh java cho điều đó. Bạn chỉ có thể thực hiện điều này bằng CSS. Điều quan trọng là liên quan đến vùng chứa bạn muốn định vị div của bạn, nếu bạn muốn định vị nó với thân 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 hoàn toàn, trong trường hợp đó div của bạn sẽ được định vị liên quan đến vùng chứa.

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

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

nếu có liên quan đến vị trí gốc bù trừ, tương đối mẹ hoặc tuyệt đối. 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 
}); 

Answer 4

Bạn cũng có thể sử dụng thuộc tính cố định vị trí 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 

Answer 5

Đây là bài viết được mô tả chính xác và cũng là mẫu có mã. JS coordinates

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 getOffset chức năng và chuyển phần tử html trả về các giá trị hàng đầu và còn lạ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) 
    } 
} 

Answer 6

Tôi đã nôi cá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' 
    } 
}`enter code here` 
to call: //Gets it to the right side 
el.style.top = getOffset(othis).top ; 
el.style.left = getOffset(othis).left ;