Ajeeb Ajeeb - 1 year ago 39
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 Source

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>