JS에서 너비를 얻는 방법의 예

---

창과 문서의 이러한 속성 값은 호환되지 않으며 나중에 추가될 예정입니다.
다음 효과 표시는 IE9 이전의 브라우저를 무시하고 주로 주류 브라우저와 휴대폰의 효과를 고려합니다.

• 너비와 높이의 속성을 얻을 수 있습니다

• clientHeight 및 clientWidth는 다음을 참조합니다. 요소 영역 크기의 클라이언트, 즉 표시되는 콘텐츠 영역+패딩

     #t1{
         width: 100px;
         height: 100px;
         border: 4px solid yellowgreen;
         background: yellow;
         padding: 10px;
     }

  
  

  p.clientWidth+';'+p.clientHeight;

  120= 너비(100)+패딩(10)*2;
  테두리가 없으면 콘텐츠가 넘치거나 스크롤 막대가 나타날 때 너비와 높이가 계산되지 않습니다.
  은 DOM 객체의 보이는 너비입니다. 여기서 보이는 너비는 overflow: scroll;을 설정한 후 콘텐츠의 일부를 숨기는 것을 의미합니다.

• offsetHeight 및 offsetWidth는 요소의 외부 크기, 즉 테두리 + 패딩 + 표시되는 콘텐츠 영역

  
  

  p.offsetWidth+';'+p.offsetHeight

  128 = 너비(100)+패딩(10)2+테두리(4)2
  위 그림의 콘텐츠 영역은 overflow: scroll;이 설정되어 있기 때문에 Overflow hided가 발생합니다.

• scrolWidth 및 scrollHeight는 요소의 실제 크기, 즉 실제 콘텐츠 영역 + 패딩

  
  

  p.scrollWidth+';'+p.scrollHeight

위의 세 쌍의 속성은 모두 dom 요소에 대한 것입니다. 그러나 조심스럽게 측정하면 위의 세 가지 방법으로는 너비(100)를 얻는 방법이 제공되지 않으므로 window.getComputedStyle(p,null).getPropertyValue('width');
을 사용하여 100을 얻을 수 있습니다.

---

사실 더 이해하기 어려운 점은 window, document.body, document.documentElement와 같은 두 개의 DOM 객체가 너비를 구할 때 다양한 문제를 안고 있다는 것입니다.
이제 이것의 마법을 살펴보겠습니다. . .

• document.body 및 document.documentElement
  전자가 body이고 후자가 html입니다. 하지만 이제 모든 사람은 요소의 기본 패딩과 여백을 0으로 설정하는 데 익숙해졌으므로 누가 위의 두 가지 방법을 통해 clientWidth에 액세스하든 그 값은 동일합니다(컴퓨터 측에서도 동일함).
  그러나 휴대폰이 이 두 값에 액세스하면 클라이언트이기 때문에 웹 페이지의 meta 태그에 대한 일부 설정을 지정하고 이 두 개체를 통해 액세스되는 속성의 값은 달라져라. 그러나 body는 html의 하위 태그이므로 시각적 창의 크기(clientWidth)를 얻으려면 후자의 document.documentElement.clientWidth를 사용하는 것이 좋습니다.

  
  
  요약하자면 document.body 사용을 중단하고 document.documentElement를 사용하세요.
  

window.innerWidth와 document.documentElement.clientWidth 중 어느 것을 사용해야 합니까?

다음으로 이야기할 것은 웹 페이지에 메타 태그를 추가하지 않는 효과에 대한 것입니다. 태그 추가에 대한 글은

적응형
• 에 대한 지식이 필요하기 때문입니다.

  위챗 내 웹페이지에 접속하기 위해 두 휴대폰에서 실행되는 안드로이드 브라우저와 아이폰의 사파리 브라우저, qq 브라우저에서 테스트를 진행했습니다. 테스트 결과는 확실히 균일하지 않습니다. 테스트 전제: 페이지에 고정 너비를 설정하지 말고 메타태그를 설정하지 마세요.
  테스트 결과:
  
  

  테이블>

  말썽꾼은 늘 존재합니다. . .
  요약하자면 모바일 페이지의 시각적 너비를 얻으려면
  document.documentElement.clientWidth

  를 사용하는 것이 좋습니다. 이에 대해서는 내 노트에서 논의할 것입니다. 메타 태그의 다양한 설정에서 속성 값이 분석됩니다.

  그런데 제가 다시 열심히 공부해서 돌아왔습니다!

  [관련 추천]

  1. 무료 js 온라인 동영상 튜토리얼

  JavaScript 중국어 참조 매뉴얼

  3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

  속성	Android용 WeChat	iphone WeChat
  window.innerWidth	320px	980px
  ~.~.clientWidth	980px	980px

위 내용은 JS에서 너비를 얻는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!