Как получить ограничительную рамку для элемента div в jquery

Я хочу вычислить ограничительную рамку для элемента div через jquery/javascript.

Я пробовал вот так.

//Left side of box 
document.getElementById("myElement").offsetLeft; 
//Top side of box 
document.getElementById("myElement").offsetTop;  
//Right side of box
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth; 
//Bottom side of box 
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

он возвращает некоторые значения. Правильно ли это, чтобы получить ограничивающий прямоугольник для элемента div через jquery / javascript.

Мне нужно что-то вроде метода getBBox() в элементе SVG. он вернет x, y, ширину и высоту элемента. Как я могу получить ограничительную рамку для элемента div.

Спасибо,

Шив

Ответы

Ответ 1

Вы можете получить ограничивающий прямоугольник любого элемента, вызывая getBoundingClientRect

var rect = document.getElementById("myElement").getBoundingClientRect();

Это вернет объект с полями слева, сверху, шириной и высотой.

Ответ 2

Поскольку это специально помечено для jQuery -

$("#myElement")[0].getBoundingClientRect();

или

$("#myElement").get(0).getBoundingClientRect();

(они функционально идентичны, в некоторых старых браузерах .get() был немного быстрее)

Обратите внимание, что если вы попытаетесь получить значения через вызовы jQuery, то он не будет принимать во внимание любые значения преобразования css, которые могут дать неожиданные результаты...

Примечание 2: В jQuery 3.0 он изменился на использование правильных вызовов getBoundingClientRect() для собственных вызовов измерений (см. руководство по обновлению jQuery Core 3.0) - который означает, что другие ответы jQuery, наконец, всегда будут правильными, но только при использовании новой версии jQuery - следовательно, это вызвало изменение прерывания...

Ответ 3

с помощью JQuery:

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]