요소 크기 메서드

자바스크립트 요소 속성(크기)

자바스크립트를 이용해서 요소의 크기 및 위치를 알 수 있습니다.

---

요소 속성(크기)

메서드	설명
clientWidth	요소의 가로(패딩 포함, 보더/마진 미포함)
clientHeight	요소의 세로(패딩 포함, 보더/마진 미포함)
offsetWidth	요소의 가로(패딩/보더 포함, 마진 미포함)
offsetHeight	요소의 세로(패딩/보더 포함, 마진 미포함)
innerWidth / outerWidth	브라우저의 가로 값(스크롤바 미포함 / 포함)
innerHeight / outerHeight	브라우저의 세로 값(스크롤바 미포함 / 포함)
offsetTop / offsetLeft	요소의 좌표값(문서 기준)
offsetParent	요소의 좌표값(부모 기준)
pageXOffset / window.scrollX	요소의 가로 스크롤 값
pageYOffset / window.scrollY	요소의 세로 스크롤 값

크기 확인 버튼

script

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"){
            let span = document.createElement("span");
            span.textContent = `${key}: ${rect[key]} `;
            result.appendChild(span);
        }
    }
})