@GetQuestion

Как получить точный размер блока до тысячных пикселя?

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

Делема в том, что я получаю не то значение, которое установлено у блока, например есть блок:
<div class="block" style="height:81.643px"></div>
Пытаюсь получить точное значение height:
$(function() {
	console.log($('.block')[0].getBoundingClientRect().height);
})

Результат не 81.643 как должно быть, а 81.640625 (если сделаем float + tofixed, то выйдет 81.641). Но у меня в приложении даже 2 тысячных - должно учитываться. И это лишь простой пример, приложение на несколько тысяч строк где подобное встречается не один десяток раз.

Подскажите верный метод.
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 1
@EvolveSunVolt
Возможно, точность измерения зависит от разрешения экрана и не может быть точнее определенного значения. Однако, есть несколько вариантов, которые можно попробовать:

1. Использовать свойство getComputedStyle, которое вернет вычисленное значение CSS свойства. Например:

$(function() {
  console.log(window.getComputedStyle($('.block')[0]).getPropertyValue('height'));
})


1. Установить размер блока с помощью CSS переменных и получить его значение через свойство getComputedStyle. Например:
<div class="block" style="--height: 81.643px;"></div>


.block {
  height: var(--height);
}

$(function() {
  console.log(window.getComputedStyle($('.block')[0]).getPropertyValue('--height'));
})


Этот подход позволяет задавать размеры блока с большей точностью, используя переменные CSS.

1. Использовать единицы измерения, позволяющие более точное определение размеров, например, rem или em.

Например, если размер шрифта установлен на 16px, то 0.001rem будет соответствовать 0.01px:
<div class="block" style="height:0.001rem"></div>
$(function() {
  console.log($('.block')[0].getBoundingClientRect().height);
})


Но следует учитывать, что использование таких единиц измерения может привести к проблемам с масштабированием и адаптивностью.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы