집 > 기사 > 웹 프론트엔드 > js에서 style.width와 offsetWidth의 차이점에 대한 자세한 설명

js에서 style.width와 offsetWidth의 차이점에 대한 자세한 설명

小云云원래의: 2017-12-22 10:10:332293검색

초보자로서 이 글에서는 특정 요소의 너비(높이, 상단 값...)를 가져올 때 style.width를 사용해야 할지, offsetWidth를 사용해야 할지 의문이 들 때가 많습니다. js에서 style.width와 offsetWidth의 차이점에 대한 기사를 가져오겠습니다(자세한 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 모든 사람들이 js에서 style.width와 offsetWidth의 차이점을 더 잘 이해할 수 있기를 바랍니다.

1. 스타일이 5b127429c4ebf04538724d6c7714739c와 같이 인라인으로 작성된 경우 style.width 또는 offsetWidth를 사용하여 요소의 너비를 가져올 수 있습니다.

그러나 #box{ width: 100px } 와 같이 스타일 시트에 스타일을 작성한 경우 offsetWidth는 요소의 너비를 얻는 데만 사용할 수 있으며 style.width가 반환하는 값은 비어 있습니다.

2.style.width 얻어진 요소의 너비는 테두리와 패딩이 차지하는 너비를 제외하고 p의 너비만 가지며 너비 값은 px입니다.

offsetWidth 획득한 요소의 너비는 너비+테두리+패딩(마진 제외) 값이며 반환 값은 단위가 없는 숫자 값일 뿐입니다.

다음 예에 표시된 대로:

<head>
    <script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        console.log(box.style.width); 
        console.log(box.offsetWidth); 
       }
</script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></p>
  </body>

콘솔의 첫 번째 결과 출력은: 300px

콘솔의 두 번째 결과 출력은: 308 참고: 300+ 3x2 +1x2 = 308 , 단위 없음

3. style.width 는 js에서 요소의 너비를 설정하는 데에도 사용할 수 있지만 offsetWidth는 사용할 수 없습니다.

다음 예에서 볼 수 있듯이:

<script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        box.style.width = &#39;200px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
        box.offsetWidth = &#39;400px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
      }
    </script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></p>
  </body>

콘솔 출력 결과는 208 200px 208 200px

즉, style.width를 통한 너비 설정은 성공했지만 offsetWidth를 통한 너비 설정은 실패했습니다.

js에서 style.width와 offsetWidth의 차이점에 대한 자세한 설명

관련 기사