> 웹 프론트엔드 > JS 튜토리얼 > js에서 style.width와 offsetWidth의 차이점에 대한 자세한 설명

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

小云云
풀어 주다: 2017-12-22 10:10:33
원래의
2395명이 탐색했습니다.

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

1. 스타일이

와 같이 인라인으로 작성된 경우 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의 일부 호환성 및 오류가 발생하기 쉬운 문제에 대한 요약

Vue.js의 구성 요소 및 템플릿에 대한 토론

Js의 함수 적용 및 호출에 대한 자세한 설명

위 내용은 js에서 style.width와 offsetWidth의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿