javascript: get height of div and use it in other div

Question

I want to use javascript to get the height of a responsive div, and use the output in another div. But I'm no good in javascript at all...

So far I've come up with:

<script language="JavaScript">
var offsetHeight = document.getElementById("myDiv").offsetHeight;
var curr_width = parseInt(offsetHeight.style.height); 
offsetHeight.style.height = (offsetHeight);
</script>

<div id="mydiv"></div>
<div id="offsetHeight" style="top:0px"></div>

So what I want is that when I resize the document, the height of mydiv is used for the style="top" value...

Anyone who can help me out? Would be wonderful!

Use your Script after DOM is loaded...If there is no element which is loaded, how will you read property of the element..? Could you find any error in console ? — Rayon, Mar 08 '16 at 10:49
No, I'm just not good enough in javascript.. I have made a wonderfull responsive cross-fade header with only css. But the problem is that I cannot place a div under the header. The header height is absolute (I need the absolute for the crossfade). So I need the height of the header for the top value of my content header. But I just don't know enough of javascript to figure out how to do that. Been searching now for several days... — Maaike, Mar 08 '16 at 10:56
place your script before closing `
` tag..And while setting height, it should be `offsetHeight+'px'` — Rayon, Mar 08 '16 at 11:02

Mosh Feu · Accepted Answer · 2016-03-08T12:06:18.567

2

You must be careful about upper/lower letter (mydiv -> myDiv)
You need to add px to set a element's height

var offsetHeight = document.getElementById("mydiv").offsetHeight;
document.getElementById("offsetHeight").style.height = offsetHeight + 'px';

#mydiv {
  background:red;
  height:150px;
}

#offsetHeight {
  background:green;  
}

<div id="mydiv"></div>
<div id="offsetHeight" style="top:0px"></div>

Important The script code should be before </body> or wrap it with the listener DOMContentLoaded

edited Mar 08 '16 at 12:06

answered Mar 08 '16 at 11:02

Mosh Feu

28,354
16
88
135

1

Key point here is placing script before closing `body` tag or using `DOMContentLoaded` or `window.onload` – Rayon Mar 08 '16 at 11:03
1

Yes, you are right. I assumes he knows it already but I was added this to the answer – Mosh Feu Mar 08 '16 at 11:14
I'm glad to hear. If this works for you please accept the answer so it will help to other people. Good luck.. – Mosh Feu Mar 08 '16 at 11:27
works, but I need it to get the height of a responsive image with an auto height. And it the height changes when the browser is resised. So I tried this: var offsetHeight = document.getElementById("figure img").offsetHeight;, but no result. Should I add an "onResize" or something? – Maaike Mar 08 '16 at 11:55
Yes, exactly. See http://stackoverflow.com/questions/13651274/how-can-i-attach-a-window-resize-event-listener-in-javascript#13651455 – Mosh Feu Mar 08 '16 at 12:04

score 0 · Answer 2 · edited Dec 23 '19 at 21:06

0

Use jQuery and let the document load. write your logic inside:

$(document).ready(function(){
  //code here    
});

Answer here

edited Dec 23 '19 at 21:06

A1rPun

16,287
7
57
90

answered Mar 08 '16 at 11:02

Deepak S Rautela

67
1
1
13

1

You can suggest the equivalent way `DOMContentLoaded`. – Mosh Feu Mar 08 '16 at 11:15

score 0 · Answer 3 · answered Mar 08 '16 at 11:06

try with this below code it may help you

var mydivHeight = document.getElementById("mydiv").offsetHeight;
document.getElementById("offsetHeight").style.height = mydivHeight + 'px';

<div id="mydiv">mydiv</div>
<div id="offsetHeight" style="top:0px"></div>

javascript: get height of div and use it in other div

3 Answers3