JQUERY-Offset()

임재헌·2023년 3월 31일

JQUERY

목록 보기

13/16

<!DOCTYPE html>   
<html lang="ko"> 
<head>
    <meta charset="UTF-8">
<title>13_offset </title> 
<style>
  
#box {
    width:600px;
    height:400px;
    position: fixed;
    left:50%;
    top:50%;
    margin:-200px 0 0 -300px;
    background:#888;
}
#child {
    width:200px;
    height:200px;
    position: relative;
    left:200px;
    top:100px;
    background: #00bfff;
    cursor: pointer;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  }
</style>
<!-- jquery import -->
<script src="jquery-3.6.4.min.js"></script>  
</head>
<body>
   <h3>offset과 position</h3>
  <div id="box">
    <div id="child"></div>
</div>
<script>
  /*
  
    -특정요소의 위치값을 얻는 방법
    1. 브라우저 크롬 기준 : offset()
  		-페이지 상단으로부터 요소가 보이는 현재 위치값을 설정하고 리턴
  
    2. 포지션닝 컨텍스트 body 기준: positon
  		-부모 객체로부터 떨어진 좌표값을 설정하고 리턴
    	-리턴 자료형 : 객체 (left, top 속성)
*/

$("#child").click(function(){
    //alert();
    let offset=$("#child").offset();
    let position=$("#child").position();
    //alert(offset);  [object Object]
    //alert(position);
    
    let msg="";
    msg +="offset left:"+offset.left +"<br>";
    msg +="offset top:"+offset.top +"<br>";
    msg +="position left:"+position.left +"<br>";
    msg +="position top:"+position.top +"<br>";

    $("#child").html(msg);
})
</script>
</body>
</html>

임재헌

이전 포스트

JQUERY-날짜 자동생성

다음 포스트

JQUERY-Offset()

JQUERY

JQUERY-날짜 자동생성

JQUERY-아날로그 시계

0개의 댓글