Determine Division Height

Hello. I am back again with a new question, same project. I double checked to make sure this is not me. I may even be right.

I created a division using the dom command
var aboutbox_info_div = document.createElement(‘div’);

This works and then I put some content in the div using the appendChild commnd. This also works well.

This div and contents resize as the size of the web page changes - responsive design type of thing. But because the div resizes I need to know what the height of the division is in order to modify the size of some other items on the page so proportion remains about the same.

After the div is appended to the document I try to get the height of the division using the
z = aboutbox_info_div.style.height;
alert('z = ’ + aboutbox_info_div.style.height);
commands

I get null or nothing. I thought for sure I would get the div height. I went back and set a height using the setAttribute command and re-ran the the program and I was able to determine the height. The case works but it is not what I want because the result is artificial.

If anyone has some thoughts or insight I would appreciate it.

Thank you.

Michael

I think you’re looking for this.

Thank you. This function is something new to me. I am still playing around with it but it does seem to do the trick.

1 Like

I’m confused. Why does it sound like the <div>, when created, is being assigned a width and height?
Boxes without constraints (divs without dimensions) are fluid/responsive by default. The contents determine the height of said <div>.

Should this topic have been opened in the JS category?

1 Like

I don’t know javascript, but I believe this is querying the styling of the element (the height property), not the resulting rendering of that styling.
The default height value of a div is auto which is not a defined numeric value, so you get null.

Sorry, ronpat. I managed to mess up the answer I just sent. Anyway it is a javascript issue and the window.getComputedStyle() method described above works very well.

The div height is determined by the text it contains, the height of which changes as the page is resized. I am trying to get the size of the div as the page is resized to I can change the size of an image contained therein to maintain its proportion.

div.clientHeight gives you the element height.
div.offsetHeight gives the height with the border and padding included.

With a touch of CSS, an image will smoothly resize to fit within its parent container and maintain its aspect ratio. No JS required.

This is a “working page”. Copy the following code to a new file and open it in your browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>resizing foreground image</title>
<!--
https://www.sitepoint.com/community/t/determine-division-height/307531/7
-->
    <style>
.imgbox {
    max-width:600px;
    margin:0 auto; /* if desired */
}
img {
    display:block;
    width:100%;
    height:auto;
}
    </style>
</head>
<body>

<div class="imgbox">
    <img src="https://via.placeholder.com/600x400" width="600" height="400" alt="product">
</div>

</body>
</html>
2 Likes

As Ron said it sounds like you are using js when css should be used. Pages are not generally built like this. What happens when the user changes their font size are you going to add more js to change everything again?

Of course without an example of what you are doing we are just guessing but it certainly sounds like you are approaching this in the wrong way :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.