jQuery 获取元素的底部和右侧位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9872128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get bottom and right position of an element
提问by Cameron
I'm trying to get the position of an element within the window like so:
我正在尝试获取窗口中元素的位置，如下所示：
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;
However the bottom and right have -in front of them... Why is this? as the numbers are correct just they should NOT be minus.
然而，底部和右侧-在他们面前......这是为什么？因为数字是正确的，只是它们不应该是负数。
回答by Mordhak
Instead of
代替
var bottom = $(window).height() - link.height();
bottom = offset.top - bottom;
Why aren't you doing
你为什么不做
var bottom = $(window).height() - top - link.height();
Edit: Your mistake is that you're doing
编辑：你的错误是你在做
bottom = offset.top - bottom;
instead of
代替
bottom = bottom - offset.top; // or bottom -= offset.top;
回答by Damian
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();
回答by Kerry Johnson
// 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');
This will find the distance from the top and left of your viewport to your element's exact edge and nothing beyond that. So say your logo was 350px and it had a left margin of 50px, variable 'right' will hold a value of 400 because that's the actual distance in pixels it took to get to the edge of your element, no matter if you have more padding or margin to the right of it.
这将找到从视口顶部和左侧到元素精确边缘的距离，除此之外别无他物。所以说你的标志是 350 像素，它的左边距是 50 像素，变量 'right' 将保持 400 的值，因为这是到达元素边缘所需的实际距离（以像素为单位），无论你是否有更多的填充或它右侧的边距。
If your box-sizing CSS property is set to border-box it will continue to work just as if it were set as the default content-box.
如果您的 box-sizing CSS 属性设置为 border-box，它将继续工作，就像它被设置为默认的 content-box 一样。
回答by Starx
You can use the .position()for this
您可以使用.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();
回答by kipid
I think
我认为
<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>
The result are
结果是
top: 44
bottom: 544
left: 72
right: 1277
bottomFromBottom: 3068
rightFromRight: 3731
in chrome browser of mine.
在我的 chrome 浏览器中。
When the document is scrollable, $(window).height()returns height of browser viewport, not the width of document of which some parts are hiden in scroll. See http://api.jquery.com/height/.
当文档可滚动时，$(window).height()返回浏览器视口的高度，而不是某些部分隐藏在滚动中的文档的宽度。请参阅http://api.jquery.com/height/。
回答by purencool
Here is a jquery function that returns an object of any class or id on the page
这是一个 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'));
回答by Nelles
Vanilla Javascript Answer
原版 Javascript 答案
var c = document.getElementById("myElement").getBoundingClientRect();
var bot = c.bottom;
var rgt = c.right;
To be clear the element can be anything so long as you have allocated an id to it <img><div><p>etc.
需要明确的是，元素可以是任何东西，只要你为它分配了一个 id<img><div><p>等等。
for example
例如
<img
id='myElement'
src='/img/logout.png'
className='logoutImg img-button'
alt='Logout'
/>
