[Solved] Getting the height attribute's value
Posted: Wed Sep 14, 2011 2:24 pm
I'm trying to retrieve the existing height attribute if none has been set by CSS.
The html
The javascript
This is just a test to see what type of value is returned and it is the one inside the else statement (Something else). My goal is to create something similar to what is created when you post code on the forum: A box that can expand / contract when a link is clicked. I don't want to set a predefined height because i don't want 5 lines of text wrapped-up in a 500px high div element. Thanks in advance
Edit
I got it sorted, if you use 'height: auto' there's no problem. The finished code looks like this
The html
Code: Select all
<div id="selfContain">
In the first two chapters, we reviewed the basics of writing proper (X)HTML and gave you
a general overview of CSS. You learned how to attach style sheets to your documents, but now
it’s time to put on your work clothes, head to the garage, and rip apart the engine to find out
exactly how the darn thing runs.
</div>
Code: Select all
function showHeight()
{
var theElement;
var theElementStyle;
theElement = document.getElementById('selfContain');
theElementStyle = theElement.style;
theHeight = theElementStyle.height;
if (theHeight == 'NULL')
{
alert('No height set');
}
else
{
alert('Something else');
}
}
Edit
I got it sorted, if you use 'height: auto' there's no problem. The finished code looks like this
Code: Select all
function increaseHeight()
{
theElement = document.getElementById('container'); // assign & define the element
theElementStyle = theElement.style; //
theElementStyle.height == 'auto' ? theElementStyle.height = '50px' : theElementStyle.height = 'auto'; // height adjustment
theElementStyle.overflowY == 'auto' ? theElementStyle.overflowY = 'scroll' : theElementStyle.overflowY = 'auto'; // overflow adjustment
}