$('#btn0').click(function(){
$('#input0').val( $('#rect0').offset().top );
$('#input1').val( $('#rect0').offset().left );
});
.offset() return {top:number,left:number}
座標を取得する。
座標を取得する
top : px
left : px
<style>
#rect1{
position:relative;
width:100px;
height:100px;
}
#rect1 p{
margin:20px;
background-color:#89e887;
width:60px;
height:60px;
}
</style>
$('#btn1').click(function(){
$('#input2').val( $('#rect1 p').offset().top );
$('#input3').val( $('#rect1 p').offset().left );
});
.offset() return {top:number,left:number}
座標を取得する。marginが設定されているときは、marginを含む。
座標を取得する
top : px
left : px
<style>
#rect2{
position:relative;
width:100px;
height:100px;
}
#rect2 p{
padding:20px;
background-color:#89e887;
width:60px;
height:60px;
}
</style>
$('#btn2').click(function(){
$('#input4').val( $('#rect2 p').offset().top );
$('#input5').val( $('#rect2 p').offset().left );
});
.offset() return {top:number,left:number}
座標を取得する。paddingが設定されているときは、paddingを含む。
座標を取得する
top : px
left : px