Is there a way to use JavaScript in order to increase the height of an element based on its current CSS height value? I've been able to do it using px units, but not with ex units. Can anyone provide a solution for this?
Here is the HTML structure:
<div class="parent">
<div class="child">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
And the corresponding CSS code:
.parent {
width:150px;
height:100px;
float:left;
background:red;
}
.child {
line-height:2.5ex;
max-height:5ex;
margin:2.5ex;
background: green;
overflow: hidden;
}
Finally, the JavaScript function:
$(document).ready(function(){
var child = $(".child");
var height = parseInt(child.css("max-height").split("ex")[0]);
height = height + 10 ;
child.css({"max-height": height});
});