요소 크기 메서드

Javascript 요소 크기 메서드에 대해 알아봅시다!

📎 Javascript 요소 크기 메서드 종류

속성은 가져오는 것 밖에 못하고 메서드는 값을 설정해줄 수 있습니다.

번호	속성/메서드 이름	설명
01	element.clientWidth	요소의 가로값(마진/보더 미포함)
02	element.clientHeight	요소의 높이값(마진/보더 미포함)
03	element.clientTop	요소의 Y축값(부모기준)
04	element.clientLeft	요소의 X축값(부모기준)
05	element.offsetWidth	요소의 가로값(보더/패딩 포함)
06	element.offsetHeight	요소의 가로값(보더/패딩 포함)
07	element.offsetTop	요소의 Y축값(문서 기준)
08	element.offsetLeft	요소의 X축값(문서 기준)
09	element.getBoundingClientRect()	op, left, right, bottom, x, y, width, height

📎 완성본

코드 보기 : HTML

<div class="main_sample">
    <div id="sample01" class="sample">
        <h3 class="blue">01. 위치 및 크기를 표현하는 속성 및 메서드</h3>
        <div class="view">
            <div class="sbox">
                <span>
                    width: 400px<br>
                    margin: 20px<br>
                    border: 1px<br>
                    padding: 20px
                </span>
            </div>
            <p class="sResult">여기에 결과값이 표시됩니다.</p>
        </div>
        <div class="button">
            <a href="#" class="btn1">박스의 가로값(clientWidth)을 구합니다.</a>
            <a href="#" class="btn2">박스의 높이값(clientHeight)을 구합니다.</a>
            <a href="#" class="btn3">박스의 Y축값(clientTop)을 구합니다.</a>
            <a href="#" class="btn4">박스의 X축값(clientLeft)을 구합니다.</a>
            <a href="#" class="btn5">박스의 가로값(offsetWidth)을 구합니다.</a>
            <a href="#" class="btn6">박스의 높이값(offsetHeight)을 구합니다.</a>
            <a href="#" class="btn7">박스의 Y축값(offsetTop)을 구합니다.</a>
            <a href="#" class="btn8">박스의 X축값(offsetLeft)을 구합니다.</a>
            <a href="#" class="btn9">박스의 X축값(getBoundingClientRect())을 구합니다.</a>
        </div>
    </div>

코드 보기 : CSS

.sample .view {
    border: 1px solid #e6e6e6;
    padding: 30px 20px 20px 20px;
}
.sample .blue{
    background-color: #7db0e391;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0;
    color: rgb(0, 0, 0);
}
.sample .sbox {
    width: 400px;
    height: 200px;
    background-color: #a2cbfa;
    border: 1px solid #4390e1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    color: #fff;
    text-align: center;
}
.sample .sbox::after {
    content: '';
    width: 480px;
    height: 280px;
    border: 1px dashed #4390e1;
    position: absolute;
    left: -21px;
    top: -21px;
}
.sample .sbox::before {
    content: '';
    width: 398px;
    height: 198px;
    border: 1px dashed #4390e1;
    position: absolute;
    left: 20px;
    top: 20px;
}
.sample .sResult {
    text-align: center;
    padding-top: 10px;
}
.sample .button {
    border: 1px solid  #e6e6e6;
    padding: 20px;
    border-top: 0;
    text-align: center;
}
.sample .button a{
    border: 1px solid  #4390e1;
    color: rgb(90, 176, 247);
    border-radius: 40px;
    padding: 10px 20px;
    display: inline-block;
    margin: 5px;
    text-decoration: none;
}
.sample .button a:hover {
    background-color: #4390e1;
    color: #fff;
    text-decoration: none;
}

코드 보기 : JS

const box1 = document.querySelector("#sample01 .sbox");

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

    result.innerHTML = "";

    for(let key in rect){
        //변수 안에 데이터 타입 아는 방법 //키값에서 함수가 아닌 것 찾기
        if(typeof rect[key] !== "function"){
            //데이터 span에 넣어주기
            let span = document.createElement("span");
            span.textContent = `${key}: ${rect[key]}`;
            result.appendChild(span);
        };
    }; 
});

원본 소스보기

위치 및 크기를 표현하는 속성 및 메서드

width: 400px
margin: 20px
border: 1px
padding: 20px

여기에 결과값이 표시됩니다.

박스의 가로값(clientWidth)을 구합니다. 박스의 높이값(clientHeight)을 구합니다. 박스의 Y축값(clientTop)을 구합니다. 박스의 X축값(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 높이값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다. 박스의 X축값(getBoundingClientRect())을 구합니다.