집 > 기사 > 웹 프론트엔드 > document.body를 document.documentElement_javascript 기술로 대체하는 이유 분석

document.body를 document.documentElement_javascript 기술로 대체하는 이유 분석

WBOY원래의: 2016-05-16 18:41:441079검색

페이지 콘텐츠가 창 크기를 초과하면 IE6은 너비 속성인 scrollWidth, clientWidth 및 offsetWidth를 콘텐츠의 실제 너비로 해석합니다.
마지막 테스트에서는 document.body 속성이 예상한 결과를 반환하지 않는 것으로 나타났습니다. 예를 들어 document.body.clientHeight를 사용하여 "페이지의 표시 영역 높이"를 얻었지만 실제로 반환된 값은 "페이지의 실제 높이"였습니다.
그럼 우리는 어떻게 해야 할까요? 문서 DTD 유형을 추가한 후에는 "가시 영역 높이" 및 "실제 콘텐츠 너비"와 같은 속성을 더 이상 얻을 수 없습니까?

코드 복사 코드는 다음과 같습니다.

documentElement

<본문>

内容高島是400PX，点击查看所有属性值

其实,我们可以用document.documentElement代替document.body来获取我们想要的结果将代码中的document.body替换为document.documentElement,再来看看各浏览器下的实际结果:
ii测试结果表明,IE系列浏览器对document.documentElement属性的解释是正确的, 其它标准浏览器将offsetHeight解释成了scrollHeight 。화염과 넷스케이프는 넷스케이프의 특징을 보여줍니다.不过总的来说各属性道可以有个于应的解释,不会 Image document.body一样只有可怜的两种解释。

终于可以放心地使用JS方获取各种页面高宽属性了ㅋㅋㅋ^_^!

성명：

이전 기사：자바스크립트 문자열 공간 제거 최종 버전(utf8 지원)_javascript 기술다음 기사：자바스크립트 문자열 공간 제거 최종 버전(utf8 지원)_javascript 기술

scrollTop（滚动条卷过的高）：
scrollLeft（滚动条卷过的宽）：
scrollHeight（内容实际高島）：
scrollWidth（内容实际宽德）：
clientWidth（可见区域宽）：
clientHeight（可见区域高）：
offsetWidth（加滚动条宽?)：
offsetHeight（加滚动条高?）：
screenTop：
screenBottom：
screenLeft：
height（分辨率高）：
swidth(分分辨率宽)：
availHeight：
availWidth：

document.body를 document.documentElement_javascript 기술로 대체하는 이유 분석

관련 기사