Как получить clientWidth & clientHeight перед отображением DIV

Question

Я хочу получить размеры элемента DIV (используется для отображения всплывающего меню в позиции курсора), тогда как это style.display='none;', однако размеры DIV всегда возвращают 0. только способ, которым я, кажется, могу получить размеры, состоит в том, чтобы сделать DIV style.display='block;' на 0,0, а затем переместить его в нужное положение, но это выглядит неуклюжим.

Я попытался сделать DIV видимым вне видимой области экрана, но это не сработает. Есть ли способ получить значения clientWidth и clientHeight, в то время как DIV скрыт?

Answer 1

Если ваш DIV не виден, вы не сможете получить его размеры.

Однако есть обходное решение. Ваш div должен быть «видимым», но это не значит, что его непрозрачность и позиция должны быть 1 и относительными.

Установите непрозрачность на 0 и позицию на «абсолютную», и вы сможете получить размеры DIV.

---

EDIT

Так как я думаю, что все больше людей будут иметь такой же проблемой, я чувствую, что должен объяснить свой ответ немного больше.

Если вы пытаетесь получить размер скрытого элемента с JavaScript, вы всегда получите 0.

Таким образом, есть методы, чтобы получить реальный размер без отображения элемента пользователя. Моим любимым является тот, о котором я уже писал выше. Вот более подробные шаги:

1. установить элементы непрозрачности до 0. Таким образом, он не будет отображаться для конечного пользователя, а вы получаете размеры.

2. вы установили положение элемента в «абсолютное». Таким образом, это не займет места.

3. теперь безопасно установить отображение на «встроенный блок».

4. вы читаете размеры элементов. На этот раз вы получите реальные значения.

5. Вы устанавливаете дисплей обратно на «скрытый» и устанавливаете непрозрачность и позицию обратно к исходным значениям.

И теперь у вас есть размер скрытого элемента.

Answer 2

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

Для того чтобы получить clientHeight и clientWidth вам нужно его визуализировать, чтобы вычисления могли выполняться на основе текущего состояния экранов (если у вас нет предварительно запрограммированной ширины и высоты, которые, как я предполагаю, вы этого не сделали)

вы можете узнать более подробную информацию на MDN here

Так у вас есть варианты:

• создать свой DIV закадровый, используя позиционирование (fixed или absolute) в сочетании с z-index или opacity
• использование width: 0 и height: 0 и overflow: hidden затем использовать scrollHeight и scrollWidth найти размер переливных

выбрать, какой вариант лучше всего подходит для вашего сайта, принимая во внимание такие вещи, как отзывчивость и screen reflows and repaints