Reference/Javascript

offsetTop 속성은 요소의 Y축 위치 값을 가져옵니다.

by @webs 2022. 12. 02.

offsetTop

offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다.

특징	설명
유형(type)	HTMLElement.offsetTop
버전(version)	ES1
결과값(return)	정수(integer)
사용성	★★★☆☆

문법(Syntax)

HTMLElement.offsetTop

document.querySelector(".box").offsetTop

요소(element) : 선택할 요소를 설정합니다.

정의(Definition)

offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
offsetTop 속성은 데이터 값만 가져올 수 있는 읽기 속성 전용입니다.
요소의 값이 display:none 이라면 값을 불러오지 못하고 null을 반환합니다.

비교(Compare)

offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 가로/세로 값을 구하는 예제입니다.

width: 400px
margin: 20px
border: 1px
padding: 20px

여기에 결과값이 표시됩니다.

박스의 가로값(clientWidth)을 구합니다. 박스의 세로값(clientHeight)을 구합니다. 박스의 Y축값(clientTop)을 구합니다. 박스의 X축값(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 세로값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box">
        <span>
            width: 400px<br>
            margin: 20px<br>
            border: 1px<br>
            padding: 20px<br>
        </span>
    </div>
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</div>

.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #fff;
}
.jsample .desc {
    padding-top: 10px;
}

const btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".jsample .desc");
const sampleBox = document.querySelector(".jsample .box");

btnAll.forEach((btn, idx) => {
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        const name = btn.querySelector("em").innerHTML

        let client = [
            sampleBox.clientWidth, 
            sampleBox.clientHeight, 
            sampleBox.clientTop, 
            sampleBox.clientLeft,
            sampleBox.offsetWidth,
            sampleBox.offsetHeight,
            sampleBox.offsetTop,
            sampleBox.offsetLeft,
        ]
        
        btnAlert.innerHTML = `이 박스의 ${name} 값은 ${client[idx]}px 입니다.`;
    });
});