혼자 적어보는 노트

[Javascript] offsetTop, offsetLeft / offsetParent / offsetWidth, offsetHeight 본문

Javascript

[Javascript] offsetTop, offsetLeft / offsetParent / offsetWidth, offsetHeight

jinist 2021. 11. 24. 00:46

스크롤이나 요소의 위치 등에 따라 변경되는 엘리먼트들 혹은
터치구현이나 그런것들을 작업하면서 계산을 하는 방식을 적용할 때
필요에 따라 검색해서 사용하곤 했지만
헷갈리는 부분이 좀 있기 때문에 정리해보도록 하겠다.

 

 

offsetParent / offsetLeft, offsetTop

 

offsetLeft, offsetTop은 지정된 요소가 가까운 조상 요소를 기준으로 얼마나 떨어져 있는지를 의미한다.
offsetParent 지정된 요소의  가까운 조상 요소이다.

 

<style>
    body{
        margin: 0;
        background-color: #E8C48F;
    }
    #example {
      width: 300px;
      height: 200px;
      background-color: white;
    }
</style>

<div id="example"></div>

<script>
const example = document.getElementById("example");

console.log(example.offsetParent); // body
console.log(example.offsetTop + " top"); // 0
console.log(example.offsetLeft + " left"); // 0
</script>

body값은 브라우저마다 약간의 기본 margin이 있어서 0으로 초기화해 두었다.


CSS position으로 설정된 부모요소가 없을 경우엔 가장 가까운 <td><th><table><body> 를 기준으로 한다.
위 코드의 offsetParent는 자동으로 body가 된다.

 

offsetParent : 지정된 요소의 가장 가까운 조상 요소

offsetLeft : offsetParent를 기준으로 오른쪽으로 얼마나 떨어져 있는 지의 값
offsetTop : offsetParent를 기준으로 아래쪽으로 얼마나 떨어져 있는 지의 값

 

*이 때 값은 number로만 제공된다.

 

    <style>
        body{
            background-color: #E8C48F;
            margin-top: 20px;
            margin-left: 20px;
        }
        #wrap {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        #example {
          position: absolute;
          left: 200px;
          width: 300px;
          height: 200px;
          background-color: white;
        }
    </style>
    <div id="wrap">
        <div id="example"></div>
    </div>

<script>
const example = document.getElementById("example");

console.log(example.offsetParent); // div#wrap
console.log(example.offsetTop + " top"); // 0
console.log(example.offsetLeft + " left"); // 200
</script>

body에 margin top,left를 20px로 주고 #example을 감싸는 #wrap을 추가해주었다.
그리고 #wrap에 position:relative로 부모값을 재 설정 해 준후 #example에 left 200px을 주었다.

 

offsetParent는 position값을 준 #wrap이 되었고

offsetTop,offsetLeft는 #wrap을 기준으로 얼마나 떨어져 있는지의 값을 제공한다.

 

 

* 주의할 점

offsetParent의 값이 null인 상황 (=> offsetTop,offsetLeft값을 구할 수 없음)

1. 지정된 요소가 display: none인 경우
2. 지정된 요소이 position: fixed인 경우
3. body나 html을 지정한 경우

 

 

+offsetWidth와 offsetHeight

지정한 요소가 차지하는 전체 사이즈 정보
== 요소의 사이즈에 padding과 border을 포함한 사이즈

 

    <style>
        body{
            background-color: #E8C48F;
        }

        #example {
          width: 300px;
          height: 200px;
          margin:20px;
          padding:25px;
          border: 10px solid black;
          background-color: tomato;

        }
    </style>
        <div id="example"></div>

    <script>
        const example = document.getElementById("example");

        console.log(example.offsetWidth); // 370
        console.log(example.offsetHeight); // 270
    </script>

 

offsetWidth : width(300px) + 양쪽 padding(25px + 25px) + 양쪽 border(10px + 10px) = 370
offsetHeight : height(200px) + 위아래 padding(25px + 25) + 위아래 border(10px + 10px) = 270

 

 

'Javascript' 카테고리의 다른 글

[Javascript] 데이터 타입 별 데이터 할당 / 불변 값 / 가변 값  (0) 2021.12.02
[Javascript] clientWidth, clientHeight / scrollWidth, scrollHeight / scrollTop , scrollLeft  (0) 2021.11.24
[Javascript] async await에 대한 이해  (0) 2021.11.23
[Javascript] Promise에 대한 이해  (0) 2021.11.23
[Javascript] Callback에 대한 이해  (0) 2021.11.22
'Javascript' Related Articles more
Comments