How to get the CSS width/height of a container element?

Question

If the size of an element, say for this case - a body element, is not known or it can be mentioned in any of the mentioned formats mentioned here: https://developer.mozilla.org/en-US/docs/Web/CSS/width, is it possible to get the size of the containing element for that element?

For example:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <section>
    <p id="test">This is a paragraph!</p>
  </section>
</body>
</html>

Here say size of body is set to 50% or 300px, how can I get the size of the whole document? Apologize if this is stupid, new to this side of things. This is not a duplicate of How to find the width of a div using vanilla JavaScript?, because I am asking for the width of a container element and not the element itself.

Possible duplicate of How to find the width of a div using vanilla JavaScript? — MyLibary
– MyLibary, Commented Nov 6, 2019 at 21:25
You could try to traverse up one parent node with Node.parentNode in your JS — Andrew
– Andrew, Commented Nov 6, 2019 at 21:25
Yes, I don't believe this is a duplicate, since the question is about the container element and not the element itself. — ssn
– ssn, Commented Nov 6, 2019 at 21:38

MEnf · Accepted Answer · 2019-11-06 21:28:20Z

2

You can use the parentNode property to find the parent of an element. You can then use the offsetWidth and offsetHeight properties to find the width/height of the element.

var parentElem = document.getElementById('test').parentNode;
var parentWidth = parentElem.offsetWidth;
var parentHeight = parentElem.offsetHeight;

answered Nov 6, 2019 at 21:28

MEnf

1,5321 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get the CSS width/height of a container element?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related