본문 바로가기
Reference/JAVASCRIPT

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

by @webstoryboy 2022. 12. 2.

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

Reference/Javascript

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

by @webs 2022. 12. 02.

offsetWidth

offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다.


특징 설명
유형(type) HTMLElement.offsetWidth
버전(version) ES1
결과값(return) 정수(integer)
사용성 ★★☆☆☆

문법(Syntax)

HTMLElement.offsetWidth

document.querySelector(".box").offsetWidth
  • 요소(element) : 선택할 요소를 설정합니다.

정의(Definition)

  • offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
  • offsetWidth 속성은 데이터 값만 가져올 수 있는 읽기 속성 전용입니다.
  • 요소의 값이 display:none 이라면 값을 불러오지 못하고 null을 반환합니다.

비교(Compare)

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

예제1(Sample)

버튼을 클릭하면 박스의 가로/세로 값을 구하는 예제입니다.

width: 400px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
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 입니다.`;
    });
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
offsetWidth

크기 및 위치와 관련된 메서드

  • clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
  • clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
  • clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
  • clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
  • offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
  • offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
  • offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
  • offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
  • offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
  • getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
  • getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

크기와 관련된 메서드 - jQuery

  • width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.

참고(Reference)


댓글