我试图在窗口中获取元素的位置,如下所示:
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;
然而,底部和右边有-
在他们面前......为什么这?因为数字是正确的,所以它们不应该是负数。
代替
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;
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();
// 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');
这将找到从视口顶部和左侧到元素精确边缘的距离,除此之外没有任何内容。所以说你的徽标是350px,它的左边距为50px,变量'right'将保持值为400,因为这是到达元素边缘所需的实际距离,无论你是否有更多的填充或右边的边距。
如果您的box-sizing CSS属性设置为border-box,它将继续工作,就像它被设置为默认内容框一样。
这是一个jquery函数,它返回页面上任何类或id的对象
var elementPosition = function(idClass) {
var element = $(idClass);
var offset = element.offset();
return {
'top': offset.top,
'right': offset.left + element.outerWidth(),
'bottom': offset.top + element.outerHeight(),
'left': offset.left,
};
};
console.log(elementPosition('#my-class-or-id'));
你可以使用.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();
我认为
<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()
返回浏览器视口的高度,而不是滚动中某些部分隐藏的文档宽度。见http://api.jquery.com/height/。