2016-06-16 3 views
3

나는 #div1height을 얻어야하고 padding-top#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"}); 
+0

내 대답을 업데이 트했습니다! –

답변

5

: div1로

사용 $("#div1")가 아닌 클래스 ID입니다

$(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>

+0

나는 그것을 편집했다. –

+0

@Ajeeb 예 업데이트 대답을 확인하십시오. –

+0

thanks buddy .. @Dhara Parmar –

1

만 사용 $('#div1').css({"padding-top" : h});

참고는 HTML에서 id을 가지고 있지만 당신은 자바 스크립트에 class를 사용하고 있는지.

$(function() { 
 
    var h = $('#div1').height(); 
 
    $('#div2').css({"padding-top" : h}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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"> 
 
    change padding top 
 
</div>

2
$('#div2').css({"padding-top" : $('#div1').height()}); 
관련 문제