본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT/Alphabet

element.offsetHeight

offsetHeight

offsetHeight 속속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.


offsetHeight

offsetHeight 속속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.

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

문법(Syntax)

element.offsetHeight

정의(Definition)

  • offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.

크기 및 위치와 관련된 메서드(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 아이콘
offsetHeight

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

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

참고 : 사이트(Reference)


더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기

질문하기