Reference/Javascript

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

by @webs 2022. 11. 17.

clientTop

clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. 위치 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다.

특징	설명
유형(type)	Element.clientTop
버전(version)	ES1
결과값(return)	숫자(number)
사용성	★★★☆☆

문법(Syntax)

element.clientTop

document.querySelector(".box").clientTop

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

정의(Definition)

clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
clientTop 속성은 데이터 값만 가져올 수 있는 읽기 속성 전용입니다.
clientTop 속성은 숫자가 반올림 되어 반환합니다. 소수점을 원하면 element.getBoundingClientRect() 메서드를 사용합니다.
clientTop 속성은 인터넷 익스플로러(Internet Explorer)에서 소개된 속성입니다.

비교(Compare)

clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
offsetTop 속성은 요소의 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 입니다.`;
    });
});