Me gustaría obtener la altura de mi ventana. Por lo tanto, uso window.innerHeight .
Sin embargo, esto devuelve un número entero y me gustaría un valor preciso (flotante). Pensé en usar document.body.getBoundingClientRect().height pero esto significa agregar algo de css para llenar completamente la ventana. Tal como eso:
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }¿Cómo puedo obtener la altura de la ventana al punto decimal?
Puede establecer la altura del elemento del documentElement y del body al 100% mediante programación, obtener la altura y luego eliminar el estilo en línea para no realizar cambios duraderos:
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!Podemos usar Window.getComputedStyle() para obtener dimensiones precisas de puntos flotantes de los elementos después del renderizado. También es considerablemente más rápido que usar getBoundingClientRect() . Sin embargo, no estoy seguro de haber entendido la razón para establecer la altura del cuerpo ...
// 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; }