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

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

普通 Javascript 答案

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

需要明确的是，元素可以是任何东西，只要你给它分配了一个 id<img> <div> <p>等。

例如

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

Answer 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');

这将找到从视口顶部和左侧到元素精确边缘的距离,除此之外没有任何内容.所以说你的徽标是350px,它的左边距为50px,变量'right'将保持值为400,因为这是到达元素边缘所需的实际距离,无论你是否有更多的填充或右边的边距.

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