Наблюдение: getBoundingClientRect иногда возвращает в свойствах нецелый long

@Inskipp · Регистрация: 27.02.2024

Студворк — интернет-сервис помощи студентам

Приходится:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const GetRect = function(ElementId){
 let Element = document.getElementById(ElementId);
 let rect = Element.getBoundingClientRect();
 return {
  Top: Math.round(rect.left), //xPosition
  Left: Math.round(rect.top), //yPosition
  Right: Math.round(rect.right),
  Width: Math.round(rect.width),
  Height: Math.round(rect.height)
 };
};

Обстоятельства:
Больше года не трогал модуль кода, который занимался взаимной привязкой хинтов к кнопкам. Все и так работало. А тут, внезапно, перестало (firefox стал более новый 133.03 (64 bit)).
Монитор: acer lcd monitor s 1191 HQL

Исследовал, и обнаружил, что getBoundingClientRect() начал в своих свойствах возвращать дробные числа width, height. Да и top, left и right, иногда. И, похоже, типа long.
И тут до меня дошло: поменялся монитор. У него очень нестандартное разрешение: 1366х768.
Пришлось кое где вставить в код что-то подобное Math.round(rect.width)

Добавлено через 15 минут
Хочется услышать мнение монстров!

@voraa · 02.02.2025, 18:35

Тут спеку нужно читать, а не монстров слушать.
По спеке, возвращаемые значения - числа с плавающей запятой. Такие как были вычислены
Если ширина 333px; и от нее берется половина, то будет 166.5
Так эти числа будут храниться
А уж как потом будет округляться при выводе на экран - это другой вопрос.
Если округлять раньше, то накопится много ошибок округления при дальнейших расчетах.

PHP/HTML
1
2
3
4
5
6
7
<div id="outer" style="margin:20px;width:333px;height:155px">
    <div id="iner" style="position:relative;width:50%;height:50%"></div>
</div>
<script>
const {x, y, width, height} = document.getElementById("iner").getBoundingClientRect();
console.log(x, y, width, height) // 28 20 166.5 77.5
</script>

krvsa · 02.02.2025, 18:37

Сообщение от Inskipp

Исследовал, и обнаружил, что getBoundingClientRect() начал в своих свойствах возвращать дробные числа width, height. Да и top, left и right, иногда.

У меня дробные... По ссылке есть кнопка для теста. https://learn.javascript.ru/coordinates

Сообщение от Inskipp

И, похоже, типа long.

Что именно у тебя показывает?

@Inskipp · 02.02.2025, 19:04 **[ТС]**

krvsa,

Что именно у тебя показывает?

width == 333.00009111....

@voraa · 02.02.2025, 19:08

Сообщение от Inskipp

width == 333.00009111....

А какие операции ты с ними потом делаешь? Зачем их округлять?

@Inskipp · 02.02.2025, 19:15 **[ТС]**

Ну, там опечатка

JavaScript
1
2
  Top: Math.round(rect.top), //xPosition
  Left: Math.round(rect.left), //yPosition

Но это несущественно...

Добавлено через 4 минуты
voraa,

А какие операции ты с ними потом делаешь? Зачем их округлять?

JavaScript
1
2
3
4
const MenuHintToButton = function(HintBlock, Element){
 let rect = Element.getBoundingClientRect();
 HintBlock.style.top = String(Math.round(rect.top) + 2)+'px';
};

или

JavaScript
1
2
3
4
5
6
7
8
9
10
const MoveHintToFindElement = function(HintBlock, Element){
let rect = Element.getBoundingClientRect();
HintBlock.style.top = String(Math.round(rect.top) + 24) + 'px';
HintBlock.style.left = String(Math.round(rect.left)) + 'px';
if (Element.nodeName == 'INPUT'){
//debugger
let width = Math.round(rect.width);
HintBlock.style.width = String(width) + 'px';
};
};

@voraa · 02.02.2025, 19:20

Сообщение от Inskipp

Ну, там опечатка

Я не про то. Зачем тебе нужны именно целые числа, а не вещественные?
Как ты потом их используешь?
Если что то вычислять, то лучше точно - с вещественными числами. А округлять только тогда, когда нужно именно целое число и иначе ну никак нельзя.

Добавлено через 2 минуты
А чем хуже?

JavaScript
1
2
3
4
5
6
7
8
9
10
const MoveHintToFindElement = function(HintBlock, Element){
let rect = Element.getBoundingClientRect();
HintBlock.style.top = (rect.top + 24) + 'px';
HintBlock.style.left = rect.left + 'px';
if (Element.nodeName == 'INPUT'){
//debugger
let width = rect.width;
HintBlock.style.width = width + 'px';
};
};

Все эти числа могут быть вещественными. Когда браузеру потребуется целое число (типа offsetWidth) он сам округлит.

@Inskipp · 02.02.2025, 19:34 **[ТС]**

voraa,

Тут спеку нужно читать, а не монстров слушать

По спеке, от MDN, числа в пикселях.

Добавлено через 5 минут
voraa,

А чем хуже?

Точно не будет работать.

Все эти числа могут быть вещественными. Когда браузеру потребуется целое число (типа offsetWidth) он сам округлит.

Хрен та. Мы строковые значения атрибутам присваиваем...

@voraa · 02.02.2025, 19:39

Сообщение от Inskipp

По спеке, от MDN, числа в пикселях.

В mdn не спека, а ее изложение
Хотя и там во втором примере

x : 120.5

y : 50

width : 440

height : 240

top : 50

right : 560.5

bottom : 290

left : 120.5

Спека тут
https://drafts.csswg.org/cssom... clientrect

To get the bounding box for element, run the following steps:
Let list be the result of invoking getClientRects() on element.

If the list is empty return a DOMRect object whose x, y, width and height members are zero.

If all rectangles in list have zero width or height, return the first rectangle in list.

Otherwise, return a DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.

https://drafts.fxtf.org/geometry-1/#domrect

interface DOMRect : DOMRectReadOnly {
constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
optional unrestricted double width = 0, optional unrestricted double height = 0);

[NewObject] static DOMRect fromRect(optional DOMRectInit other = {});

inherit attribute unrestricted double x;
inherit attribute unrestricted double y;
inherit attribute unrestricted double width;
inherit attribute unrestricted double height;
};

Добавлено через 2 минуты

Сообщение от Inskipp

Хрен та. Мы строковые значения атрибутам присваиваем...

Учить JS!!!

Если это не строка, то я - Папа Римский.

JavaScript
1
(rect.top + 24) + 'px'

@Inskipp · 02.02.2025, 19:45 **[ТС]**

voraa, Уел...

Добавлено через 3 минуты
voraa,

Если это не строка, то я - Папа Римский.

Только строка вот такая:
'333.00008490px'

@voraa · 02.02.2025, 19:46

Сообщение от Inskipp

Только строка вот такая:
'333.00008490px'

Ну не тебе же ее читать, а браузеру. А ему без разницы.

@Inskipp · 02.02.2025, 19:53 **[ТС]**

voraa,

Ну не тебе же ее читать, а браузеру. А ему без разницы.

Есть большая разница в ЦЫФре строкой и цифре_строкой в конце которой добавлено 'px'.
Ты устал и мелких деталей не видишь...
Извини, это я не в обиду.
Очень тебя уважаю.

@voraa · 02.02.2025, 20:03

Сообщение от Inskipp

Есть большая разница в ЦЫФре строкой и цифре_строкой в конце которой добавлено 'px'.
Ты устал и мелких деталей не видишь...

Кто бы еще смысл написанного мне объяснил

@Inskipp · 02.02.2025, 20:16 **[ТС]**

voraa,

Кто бы еще смысл написанного мне объяснил

JavaScript
1
2
3
4
5
6
7
8
9
const MoveHintToFindElement = function(HintBlock, Element){
 let rect = Element.getBoundingClientRect();
 HintBlock.style.top = String(rect.top + 24) + 'px';
 HintBlock.style.left = String(rect.left) + 'px';
 if (Element.nodeName == 'INPUT'){
  let width = rect.width;
  HintBlock.style.width = String(width) + 'px';
 };
};

Хинт становится невидимым

@voraa · 02.02.2025, 20:34

Сообщение от Inskipp

Хинт становится невидимым

Не зная подробностей, ничего не могу сказать.
Что такое HintBlock, где он расположен, относительно чего позиционируется....

Надо еще учитывать, что getBoundingClientRect дает координаты left и top относительно окна просмотра (левого верхнего угла окна браузера), а свойства css left и top устанавливают координаты относительно ближайшего родителя c position не static.

@Inskipp · 02.02.2025, 20:50 **[ТС]**

voraa, Впрочем, вот эти изменения, ситуацию не исправили:

JavaScript
1
2
3
4
5
6
7
8
9
10
const MoveHintToFindElement = function(HintBlock, Element){
 let rect = Element.getBoundingClientRect();
 HintBlock.style.top = String(Math.round(rect.top) + 24) + 'px';
 HintBlock.style.left = String(Math.round(rect.left)) + 'px';
 if (Element.nodeName == 'INPUT'){
  //debugger
  let width = Math.round(rect.width);
  HintBlock.style.width = String(width) + 'px';
 };
};

Добавлено через 4 минуты
voraa,

Не зная подробностей, ничего не могу сказать.
Что такое HintBlock, где он расположен, относительно чего позиционируется....

HintBlock - это див. Который должен быть у кнопки. А в случае input, у поля ввода.
Так вот, у кнопок он видим. А у поля ввода - НЕТ.

Добавлено через 3 минуты
Дебагер показывает width == 333

@voraa · 02.02.2025, 20:52

Сообщение от Inskipp

Так вот, у кнопок он видим. А у поля ввода - НЕТ.

Я не знаю ваш html код, что где расположено

Сообщение от voraa

Надо еще учитывать, что getBoundingClientRect дает координаты left и top относительно окна просмотра (левого верхнего угла окна браузера), а свойства css left и top устанавливают координаты относительно ближайшего родителя c position не static.

Добавлено через 1 минуту

Сообщение от Inskipp

Дебагер показывает width == 333

А что дебагер показывает про left и top?

@Inskipp · 02.02.2025, 21:07 **[ТС]**

voraa,

А что дебагер показывает про left и top?

Правильно показывает. Возле кнопок.
А вот возле инпут (как видно в коде, особый случай) они тоже правильные, но что-то с шириной...

Добавлено через 4 минуты
input type="text"

Добавлено через 1 минуту
остальные type="button"

Добавлено через 3 минуты
voraa, Вот HTML, если это чем-то поможет:

@voraa · 02.02.2025, 21:09

Сообщение от Inskipp

Вот HTML, если это чем-то поможет:

И где здесь <input type="text'> и кто тут hint?

@voraa · 02.02.2025, 21:18

Hint где находится? Кто его родительский элемент? Какие стили у этого родителя?

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@voraa 1254 / 1169 / 179 Регистрация: 21.01.2024 Сообщений: 5,439
	02.02.2025, 21:18
	Hint где находится? Кто его родительский элемент? Какие стили у этого родителя? 0

Наблюдение: getBoundingClientRect иногда возвращает в свойствах нецелый long

Решение