获取元素


66

我试图让窗口内的元素的位置,像这样的底部和右侧位置:

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; 

但是底部和右侧在他们面前有- ...为什么这是?因为数字是正确的,只是它们不应该是负数。

78

而不是

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; 

1

可以使用.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(); 
+4

在jQuery的文档没有提及“右”属性在结果对象位置()。 [Doc here](http://api.jquery.com/position/) 26 3月. 122012-03-26 12:41:59

  0

@Mordhak,更新应该可以工作。 26 3月. 122012-03-26 12:45:22

+4

是的,但它应该被抵消而不是位置,抵消是顶部/左边取决于文件,位置是指父母。 26 3月. 122012-03-26 12:52:39

  0

@Mordhak,是的,但你可以看到我使用'windows.width()'和类似的进一步的计算也是如此。 12 9月. 122012-09-12 07:24:44

+2

'position.right'在这种情况下仍然不存在。 24 1月. 142014-01-24 15:30:24


0

我觉得

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


28
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();

4
// 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属性设置为边界框,将继续就好像它被设置为默认的内容框中工作。

  0

最适合我的答案! 23 6月. 162016-06-23 15:34:49