Ajeeb Ajeeb - 5 months ago 13
jQuery Question

How to get height

I need to get

height
of the
#div1
and change css
padding-top
of
#div2
.

HTML:

<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
</div>

<div id="div2">
change padding top
</div>


JS:

var h = $('.div1').height();
$('.div2').css({"padding-top" : "hpx"});

Answer

Try:

use $("#div1") as div1 is Id not a class

$( document ).ready(function() {
    var h = $('#div1').height(); // get height of div using .height()
    $('#div2').css("padding-top" , h+"px"); // concatenate h with + in css
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="div1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
</div>

<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero porro neque placeat explicabo dolore suscipit sapiente saepe non harum. Quod neque ipsum veniam autem tempora laboriosam, asperiores quasi rem amet!
  
</div>