[메서드] 요소 크기 메서드

요소 크기 메서드

이 메서드는 요소의 크기, 높이 등을 구하는 메서드입니다.

---

element.clientWidth : 요소 가로값(margin/border 미포함)
element.clientHeight : 요소 높이값(margin/border 미포함)
element.clientTop : 요소 Y축값(부모기준)
element.clientLeft : 요소 X축값(부모기준)
element.offsetWidth : 요소 가로값(border/padding 포함한 값)
element.offsetHeight : 요소 높이값(border/padding 포함한 값)
element.offsetTop : 요소 Y축값(문서 기준)
element.offsetLeft : 요소 X축값(문서 기준)
element.getBoundingClientRect() : 요소 top, left, right, bottom, x, y, width, height(객체로 반환)

위치 및 크기를 나타내는 속성 및 메서드

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

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

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

■ JS 코드

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

document.querySelector("#sample01 .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 " + box1.clientWidth + "px 입니다.
(margin/border불포함) ";
})
document.querySelector("#sample01 .btn2").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 높이값은 " + box1.clientHeight + "px 입니다.
(margin/border불포함) ";
})
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 입니다.
(border/padding 포함) ";
})
document.querySelector("#sample01 .btn6").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 높이값은 " + box1.offsetHeight + "px 입니다.
(border/padding 포함) ";
})
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"){    //변수안의 데이터가 무슨 타입인지 확인할 수 있음 : typeof  //키값에서 함수가 아닌걸 찾아냄
            let span = document.createElement("span");
            span.textContent = `${key}: ${rect[key]}  `;
            result.appendChild(span);
        }          
    }
})

document.querySelector("#sample01 .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 " + box1.clientWidth + "px 입니다.<br>(margin/border불포함) ";
})