본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT/Alphabet

element.clientTop

clientTop

clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. 문서의 기준점으로부터 가져오는 offsetTop 속성과 비교됩니다.


clientTop

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

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

문법(Syntax)

element.clientTop

정의(Definition)

  • clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
  • clientTop 속성은 문서의 기준점으로부터 가져오는 offsetTop 속성과 비교됩니다.

크기 및 위치와 관련된 메서드(Dimensions Related method)

  • clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
  • clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
  • clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
  • clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
  • offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
  • offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
  • offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
  • offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
  • offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
  • getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
  • getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 가로/세로 값을 구하는 예제입니다.
width: 400px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
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 box = document.querySelector(".jsample .box");

document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 가로 값은 "+ box.clientWidth + "px 입니다.(마진/보더 불포함)";
});
document.querySelector(".sampleBtn .btn2").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 세로 값은 "+ box.clientHeight + "px 입니다.(마진/보더 불포함)";
});
document.querySelector(".sampleBtn .btn3").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 Y축 값은 "+ box.clientTop  + "px 입니다.(부모 기준)";
});
document.querySelector(".sampleBtn .btn4").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 X축 값은 "+ box.clientLeft  + "px 입니다.(부모 기준)";
});
document.querySelector(".sampleBtn .btn5").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 가로 값은 "+ box.offsetWidth  + "px 입니다.(보더/패딩 포함)";
});
document.querySelector(".sampleBtn .btn6").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 세로 값은 "+ box.offsetHeight  + "px 입니다.(보더/패딩 포함)";
});
document.querySelector(".sampleBtn .btn7").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 Y축 값은 "+ box.offsetTop  + "px 입니다.(문서 기준)";
});
document.querySelector(".sampleBtn .btn8").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 X축 값은 "+ box.offsetLeft  + "px 입니다.(문서 기준)";
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
clientTop

참고 : 크기와 관련된 메서드(Dimensions Related method) - jQuery

  • width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.

참고 : 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기