I want to get the height of an element, and the width of Body, so I called
document.style.width
[element].style.height
That returned empty strings, so I got When I call [element].style / document.style I receive this:
Why does this happen? ¿Is an issue of React? I'm not using styled components, only css templates with css-loader and style-loader of webpack
You need to think it like a react, here in your sample, you are do that via real dom, and its incorrect, what you need to do, its use useRef
For example:
const imageRef = useRef(null);
<img
ref={(node) => {
imageRef.current = node;
}}
/>
and you can use it like this (like real dom):
imageRef.current.clientHeight
You can read this topic: React Ref and Dom
Probably this is because nowhere as yet in the code have the styles been set (in the sense of element.style.property = value for example in JS, or style="property: value;" inline in the element).
I suspect that the styling is being done through stylesheets and classes.
What you want is to get the current computed stle. Try:
window.getComputedStyle(element);
on the elements you are interested in.
See https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle