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;

Answer 1

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>