¿Cómo puede obtener las dimensiones del área de contenido de un elemento DOM?
Extrañamente no pude encontrar una pregunta/respuesta a esto. Muchas preguntas sobre la medición de elementos DOM en su conjunto, pero ninguna sobre el área de contenido en sí.
Ejemplo:
div { width: 100px; height: 200px; padding: 10px; border: 5px; margin: 15px; box-sizing: border-box; }Ahora, algunas partes le brindan varias partes del modelo de caja, pero nada parece brindarle el contenido:
const elem = document.querySelector('div'); elem.offsetWidth; // content + padding + border elem.clientWidth; // content + padding window.getComputedStyle(elem); // Returns an object with width padding and border as strings like "15px". window.getBoundingClientRect(); // Gives width and height of total box-model excluding margin if sizing is border-box.Deberá restar los rellenos calculados del ancho y alto del cliente:
const elem = document.getElementById('elem'); const computedStyles = window.getComputedStyle(elem) const extraWidthOffset = +computedStyles.getPropertyValue("padding-left").slice(0, -2) + +computedStyles.getPropertyValue("padding-right").slice(0, -2) const extraHeightOffset = +computedStyles.getPropertyValue("padding-top").slice(0, -2) + +computedStyles.getPropertyValue("padding-bottom").slice(0, -2) const contentWidth = elem.clientWidth - extraWidthOffset const contentHeight = elem.clientWidth - extraHeightOffset console.log(contentWidth, contentHeight) #elem { width: 100px; height: 200px; padding: 10px; border: 5px; margin: 15px; box-sizing: border-box; } <div id="elem"> <p>Content</p> </div>