Change div height in Internet Explorer 7

Question

I can't change the div height in Internet Explorer 7 with this code, that works in other browsers.

document.getElementById('my_div').setAttribute("style","height:1000px !important");
    var clientHeight = document.getElementById('my_div').clientHeight;

Don't do that. Instead, add an event handler by calling attachEvent / addEventListener.http://www.quirksmode.org/js/events_advanced.html — Mirza Obaid, Jan 16 '17 at 12:56

score 1 · Answer 1 · answered Jan 16 '17 at 13:18

You need to change this line

document.getElementById('my_div').setAttribute("style","height:1000px !important");

by

document.getElementById('my_div').style.height = '1000px';

This is a complete running example:

function changeDivHeight(){
    var oldHeight = document.getElementById('my_div').clientHeight;
 console.log('old Height:', oldHeight);
 
 var val = document.getElementById('newHeight').value;
 document.getElementById('my_div').style.height = val + 'px';
 
    var newHeight = document.getElementById('my_div').clientHeight;
 console.log('new Height:', newHeight);
}

#my_div{
 background-color: #d1d1f1;
 width: 400px;
 height: 20px;
}

New height value
<input id="newHeight" type="text" placeholder="New div height" />
<button onclick="changeDivHeight()">Change height</button>
<div id="my_div"></div>

Change div height in Internet Explorer 7

1 Answers1