獲取元素

Question

我試圖讓窗口內的元素的位置，像這樣的底部和右側位置：

var link = $(element); 

var offset = link.offset(); 
var top = offset.top; 
var left = offset.left; 
var bottom = $(window).height() - link.height(); 
bottom = offset.top - bottom; 
var right = $(window).width() - link.width(); 
right = offset.left - right; 

但是底部和右側在他們面前有- ...爲什麼這是？因爲數字是正確的，只是它們不應該是負數。

Answer 1

而不是

var bottom = $(window).height() - link.height(); 
bottom = offset.top - bottom; 

你爲什麼不這樣做

var bottom = $(window).height() - top - link.height(); 

編輯：你的錯誤是，你正在做的

bottom = offset.top - bottom; 

代替

bottom = bottom - offset.top; // or bottom -= offset.top; 

Answer 2

可以使用.position()此

var link = $(element); 
var position = link.position(); //cache the position 
var right = $(window).width() - position.left - link.width(); 
var bottom = $(window).height() - position.top - link.height(); 

Answer 3

我覺得

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<div>Testing</div> 
<div id="result" style="margin:1em 4em; background:rgb(200,200,255); height:500px"></div> 
<div style="background:rgb(200,255,200); height:3000px; width:5000px;"></div> 

<script> 
(function(){ 
    var link=$("#result"); 

    var top = link.offset().top; // position from $(document).offset().top 
    var bottom = top + link.height(); // position from $(document).offset().top 

    var left = link.offset().left; // position from $(document).offset().left 
    var right = left + link.width(); // position from $(document).offset().left 

    var bottomFromBottom = $(document).height() - bottom; 
    // distance from document's bottom 
    var rightFromRight = $(document).width() - right; 
    // distance from document's right 

    var str=""; 
    str+="top: "+top+"<br>"; 
    str+="bottom: "+bottom+"<br>"; 
    str+="left: "+left+"<br>"; 
    str+="right: "+right+"<br>"; 
    str+="bottomFromBottom: "+bottomFromBottom+"<br>"; 
    str+="rightFromRight: "+rightFromRight+"<br>"; 
    link.html(str); 
})(); 
</script> 

結果是

top: 44 
bottom: 544 
left: 72 
right: 1277 
bottomFromBottom: 3068 
rightFromRight: 3731 

在我的Chrome瀏覽器。

當文檔是可滾動的，$(window).height()返回瀏覽器視窗中，其中的一些部件在滾動HIDEN文件不是寬度的高度。見http://api.jquery.com/height/。

Answer 4

var link = $(element); 
var offset = link.offset(); 

var top = offset.top; 
var left = offset.left; 

var bottom = top + link.outerHeight(); 
var right = left + link.outerWidth();

Answer 5

// Returns bottom offset value + or - from viewport top 
function offsetBottom(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().bottom } 

// Returns right offset value 
function offsetRight(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().right } 

var bottom = offsetBottom('#logo'); 
var right = offsetRight('#logo'); 

這將找到頂部的距離，並留下您的視口的你的元素的確切邊緣並沒有什麼超出。所以說，您的標誌是350像素，並具有5​​0像素的左邊距，變「右」將舉行400的值，因爲這是在像素的實際距離花去你的元素的邊緣，不管你有更多的填充或者對其權利的保證金。

如果你的盒子大小CSS屬性設置爲邊界框，將繼續就好像它被設置爲默認的內容框中工作。