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:

CSS list

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

CodePudding user response：

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

CodePudding user response：

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