Reference/Javascript

offsetHeight 속성은 요소의 세로 값을 가져옵니다.

by @webs 2022. 12. 02.

offsetHeight

offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다.

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

문법(Syntax)

HTMLElement.offsetHeight

document.querySelector(".box").offsetHeight

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

정의(Definition)

offsetHeight 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
offsetHeight 속성은 데이터 값만 가져올 수 있는 읽기 속성 전용입니다.
요소의 값이 display:none 이라면 값을 불러오지 못하고 null을 반환합니다.

비교(Compare)

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

예제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 입니다.`;
    });
});