I'm trying to dynamically change the height of a cell than contains a div. Now i can change the height of the div, just fine, but when I try the cell, it just doesn't work, yet I get no errors. Any Ideas on why this doesn't work?

if( df0.checkbox1.checked)
{
    document.getElementById('layerOne').style.visibility = 'visible';
    document.getElementById('layerOne').style.height = 125;
    document.getElementById('eftcell').height = '125px'
}
else
{
    document.getElementById('layerOne').style.visibility = 'hidden';
    document.getElementById('layerOne').style.height = 1; 
    document.getElementById('eftcell').height = '1px'
}

I'm trying to dynamically change the height of a cell than contains a div. Now i can change the height of the div, just fine, but when I try the cell, it just doesn't work, yet I get no errors. Any Ideas on why this doesn't work?

if( df0.checkbox1.checked)
{
    document.getElementById('layerOne').style.visibility = 'visible';
    document.getElementById('layerOne').style.height = 125;
    document.getElementById('eftcell').height = '125px'
}
else
{
    document.getElementById('layerOne').style.visibility = 'hidden';
    document.getElementById('layerOne').style.height = 1; 
    document.getElementById('eftcell').height = '1px'
}

• javascript

• It's "height".. and that indentation style is horrid! – Lightness Races in Orbit Commented Jun 9, 2011 at 15:10
• Not sure what you are trying to say, I am using "height" – Limey Commented Jun 9, 2011 at 15:17
• Not originally in the text and title. – Lightness Races in Orbit Commented Jun 9, 2011 at 15:30
• but my code was good though (at least in the spelling of height) – Limey Commented Jun 9, 2011 at 15:49

3 Answers 3

Use the "px" unit when changing style.property:

document.getElementById('layerOne').style.height = "125px";
document.getElementById('eftcell').height = 125;

I did a bit of testing in FireFox 4 (via Firebug), it seems to work for me. Here are some things to look for:

• Try using just the number 125 for height, rather than the string '125px'
• Make sure that the element with id="eftcell" is the <td> element, not its parent <tr>
• Look into patibility issues between browsers, maybe your browser doesn't allow a height attribute on <td>?

Needs px and to be in a string. Also HTML5 doesn't support javascript height on TD cells.