JS에서 너비를 얻는 방법의 예-JS 튜토리얼-php.cn

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

零下一度

풀어 주다： 2017-05-06 15:26:11

원래의

1923명이 탐색했습니다.

창과 문서의 이러한 속성 값은 호환되지 않으며 나중에 추가될 예정입니다.
다음 효과 표시는 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