Как получить границы элемента div в jQuery

Question

Я хочу рассчитать ограничивающий прямоугольник (bounding box) для элемента div с использованием jQuery/JavaScript.

Я попробовал сделать это следующим образом:

// Левый край рамки
document.getElementById("myElement").offsetLeft; 
// Верхний край рамки
document.getElementById("myElement").offsetTop;  
// Правый край рамки
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth; 
// Нижний край рамки
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

Этот код возвращает некоторые значения. Это правильный способ получить ограничивающий прямоугольник для элемента div с использованием jQuery/JavaScript?

Мне нужно что-то похожее на метод getBBox() для элемента SVG, который возвращает x, y, width и height элемента. Каким образом я могу получить ограничивающий прямоугольник для элемента div?

Answer 1

Если вы хотите извлечь координаты элемента и его размеры с использованием jQuery, вы можете сделать это следующим образом:

var myelement = $("#myelement");
var offsetLeft = myelement.offset().left;  // Координата X
var offsetTop = myelement.offset().top;    // Координата Y
var width = myelement.width();              // Ширина элемента
var height = myelement.height();            // Высота элемента

var dimensions = [offsetLeft, offsetTop, width, height];

В данном коде мы сначала получаем элемент с помощью селектора $("#myelement"), а затем извлекаем его координаты (с помощью offset().left и offset().top) и размеры (с помощью width() и height()). Результаты сохраняются в массиве dimensions.

Таким образом, dimensions будет содержать значения в следующем порядке: [координата X, координата Y, ширина, высота].

Как получить границы элемента div в jQuery

1 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных