Reference/Javascript

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

by @webs 2022. 11. 17.

clientHeight

clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다. 마진과 보더 값이 있다면 포함되어 있지 않습니다. 높이 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. 익스프롤러에서 사용된 오래 사용된 속성이며, element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다.

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

문법(Syntax)

element.clientHeight

document.querySelector(".box").clientHeight

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

정의(Definition)

clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
clientHeight 속성은 데이터 값만 가져올 수 있는 읽기 속성 전용입니다.
clientHeight 속성은 숫자가 반올림 되어 반환합니다. 소수점을 원하면 element.getBoundingClientRect() 메서드를 사용합니다.
clientHeight 속성은 인터넷 익스플로러(Internet Explorer)에서 소개된 속성입니다.

비교(Compare)

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

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