Quiero obtener la altura de un elemento y el ancho de Body, así que llamé
document.style.width [element].style.heightEso devolvió cadenas vacías, así que obtuve Cuando llamo [element].style / document.style, recibo esto:
¿Por qué pasó esto? ¿Es un tema de React? No estoy usando componentes con estilo, solo plantillas css con css-loader y style-loader de webpack
Debe pensarlo como una reacción, aquí en su muestra, lo hace a través de un dom real, y es incorrecto, lo que debe hacer, su uso useRef
Por ejemplo:
const imageRef = useRef(null); <img ref={(node) => { imageRef.current = node; }} />y puedes usarlo así (como real dom):
imageRef.current.clientHeightPuedes leer este tema: React Ref y Dom
Probablemente esto se deba a que todavía no se han establecido los estilos en ninguna parte del código (en el sentido de elemento.estilo.propiedad = valor, por ejemplo en JS, o estilo="propiedad: valor;" en línea en el elemento).
Sospecho que el estilo se realiza a través de hojas de estilo y clases.
Lo que quiere es obtener el estilo calculado actual. Probar:
window.getComputedStyle(element);sobre los elementos que le interesan.
Consulte https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle