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

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 3

// 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，可变＆＃39;右边＆＃39;将保持值为400，因为它是到达元素边缘所需的实际距离（无论您是否在其右侧有更多填充或边距）。

如果您的box-sizing CSS属性设置为border-box，它将继续工作，就像它被设置为默认内容框一样。

Answer 4

这是一个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'));

Answer 5

您可以将.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 6

我认为

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

Answer 7

香草JavaScript答案

var c = document.getElementById("myElement").getBoundingClientRect();
var bot = c.bottom;
var rgt = c.right;

为清楚起见，只要您为其分配了ID <img> <div> <p>等，该元素就可以是任何东西。

例如

<img
    id='myElement'
    src='/img/logout.png'
    className='logoutImg img-button'
    alt='Logout'
/>

获取元素的底部和右侧位置

7 个答案: