Я хочу получить высоту моего окна. Следовательно, я использую window.innerHeight.

Однако это возвращает целое число, и мне нужно точное значение (с плавающей запятой). Я хотел бы использовать document.body.getBoundingClientRect().height, но это означает добавить немного CSS, чтобы полностью заполнить окно. Такие вот:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Как я могу получить высоту окна до десятичной точки?

1
PierBJX 10 Окт 2021 в 04:13

2 ответа

Лучший ответ

Вы можете установить documentElement и Программно установите высоту body на 100%, получите высоту, затем удалите встроенный стиль, чтобы не вносить каких-либо долговременных изменений:

function getPreciseHeight() {
  document.documentElement.style.height = "100%";
  document.body.style.height = "100%";

  const height = document.body.getBoundingClientRect().height;

  document.documentElement.style.removeProperty('height');
  document.body.style.removeProperty('height');
  return height;
}

console.log("Normal:", document.body.getBoundingClientRect().height)



console.log("Fixed:", getPreciseHeight())
Hello World!
1
Spectric 10 Окт 2021 в 01:38

Чтобы получить точные размеры элементов с плавающей запятой после рендеринга. Это также значительно быстрее, чем использование getBoundingClientRect () . Я не уверен, что понял причину установки высоты тела ..

// Precise dimensions of any element 
function getTrueFloatSize(element) {
    x = parseFloat(window.getComputedStyle(element).height)
    y = parseFloat(window.getComputedStyle(element).width)
    return [x, y];
}

console.log(getTrueFloatSize(document.body))
body {
 width: 45.5px;
 height: 267.5px;
}
0
Tobias Gade 10 Окт 2021 в 02:30