如何在特定座標中定位DIV？

Question

我想定位一個DIV在一個特定的座標？我怎樣才能使用JavaScript？

Answer 1

腳本抓住它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'; 
} 

Answer 2

您不必使用Javascript來完成此操作。 使用普通老式CSS：

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

如果你覺得你必須使用JavaScript，或者正在嘗試做這個動態 使用jQuery，這會影響類的「嗒嗒」的所有div：

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

另外，如果必須使用普通的舊的JavaScript可以通過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

以及它取決於如果你想要的是定位一個div再沒有別的，你不需要爲此使用java腳本。你只能通過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 
}); 

Answer 4

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

這是一篇正確描述的文章，也是帶有代碼的示例。 JS coordinates

按照要求。下面是該文章最後發佈的代碼。 需要呼叫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) 
    } 
} 

Answer 6

我對此進行了拆分並添加了'px'; 工作得很好。

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 ;