JAVASCRIPT | 요소 크기 메서드

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

01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로값(margin/border 미포함)
02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 높이값(margin/border 미포함)
03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축값(부모 기준)
04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축값(부모 기준)
05. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로값(border/padding 포함)
06. 요소 속성 : 크기 및 위치 : element.offsetHeight : 요소의 높이값(border/padding 포함)
07. 요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 Y축값(문서 기준)
08. 요소 속성 : 크기 및 위치 : element.offsetLeft : 요소의 X축값(문서 기준)

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 불포함) 입니다.";
});

...

09. 요소 메서드 : 크기 및 위치 : element.getBoundungClientRect() : 전체 크기 및 위치(객체로 표현)

document.querySelector("#sample01 .btn9").addEventListener("click", (e)=>{
    e.preventDefault();

    // document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 getBoundingClientRect()값은 " +box1.getBoundingClientRect() + "px(문서 기준) 입니다.";
    // console.log(box1.getBoundingClientRect());  DOMRect 객체 방식으로 결과 뜸

    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"){                // 객체 안에 함수가 아닌 것 찾기
            let span = document.createElement("span");      // 데이터 값을 span에 넣어줌
            span.textContent= `${key}: ${rect[key]} `;
            result.appendChild(span);
        };
    };
});

---

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

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

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

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