Question

The problem behind my question in the title is this:

jQuery( document ).ready( function() {
    var height = jQuery( "#current-image" ).css( "height" ); // Retrieve height
    jQuery( '#prev' ).css( 'height', height + 'px' );        // Set element to that height
});

First I retrieve the height of the element “current-image”. Then I want to set that height to another element, called “prev”.

• The element “prev”‘s default height is 200 px.
• The element “current-image”‘s height is 350 px
• I want the element “prev”s height to be 350 px

Somehow the element “prev” keeps it original height 200px. When I put an alert(height); statement between the two lines of code the variable is indeed 350 but it never sets the height of the “prev” element. I can’t figure out what I’m doing wrong since this is such an simple bit of code..

Answer 1

height should contain “350px” and not “350” because you’re getting the CSS value for this element, not the computed height (without unit). So you don’t need to add + ‘px’, because you’ll obviously get “350pxpx” which is invvalid, hence the height not changing.