JavaScript에서 innerWidth 및 innerHeight 사용에 대한 자세한 설명
- 小云云원래의
- 2018-01-24 15:46:181609검색
이 기사에서는 주로 JavaScript의 innerWidth 및 innerHeight에 대해 간략하게 설명합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
innerWidth 및 innerHeight 속성
설명: 창 개체의 읽기 전용 속성은 창의 문서 표시 영역의 높이와 너비를 픽셀(px) 단위로 선언합니다. (참고: 여기의 너비와 높이는 메뉴 표시줄, 도구 모음, 스크롤 막대 등의 높이를 포함하지 않습니다.)
다음은 이 두 가지 속성을 확인합니다:
화면 해상도: 1920x1080 브라우저: QQ 브라우저(커널) Chrome) 코드는 다음과 같습니다.
var width=window.innerWidth,height=window.innerHeight; //창의 높이와 너비를 받기 위해 너비와 높이를 각각 정의합니다.
alert(width); 창 너비는 1920px
alert(height); //창 높이는 950px
innerWidth입니다. 브라우저 양쪽에 장애물이 없으므로 화면 너비는 1920이고 innerHeight는 브라우저에 툴바가 있고 디스플레이에 작업 표시줄이 있어서 130px로 압축되었습니다
이번에 블로거는 작업 표시줄(실제로는 숨겨져 있음)과 툴바의 탭을 죽이고 F12를 누르고 개발자 옵션을 추가하여 테스트했습니다. 다시:
/*————————干掉任务栏后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //宽度没有变化,还是1920px alert(height); //而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度 /*————————又干掉标签页后，并加上开发者选项后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px alert(height); //而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px
결론: 설명 innerHeight 및 innerWidth는 표시 창의 픽셀만 계산합니다. 메뉴 막대 및 도구 모음과 같은 외부 요인이 있으면 자동으로 확장됩니다. .외부 요소를 테스트한 후 아래에서 테스트해 보겠습니다. 내부 요소 스크롤 막대를 살펴보겠습니다
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试innerHeight属性</title>
</head>
<body>
<p style="width:500px;height:1300px;background-color:red;"></p>
<script>
window.onload=function(){
/*————————p超出长度,带着滚动条后————————*/
var width=window.innerWidth,height=window.innerHeight;
alert(width); //窗口的宽度 1920px
alert(height); //窗口的高度 950px
}
</script>
</body>
</html>
결론: 내부 스크롤 막대가 있어도 너비에는 영향이 없다는 의미입니다. 1920px
최종 결론: innerHeight 및 innerWidth는 양식의 높이와 너비를 가져오며, (브라우저 개발자 옵션, 즐겨찾기)와 같은 외부 요인은 영향을 미치지만 내부 요인(스크롤 막대)은 영향을 미치지 않습니다
결점이 가장 많은 IE에 대해 이야기해 보겠습니다. IE 호환성 문제는 다음과 같이 해결할 수 있습니다
//兼容代码可以这样子写
var width = window.innerWidth,height = window.innerHeight;
if (typeof width != 'number') { //如果类型不为number,表示该浏览器不支持innerWidth属性
if (document.compatMode == 'CSS1Compat') { //CSS1Compat：判断是否为标准兼容模式。
width = document.documentElement.clientWidth;
height = document.docuementElement.clientHeight;
} else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)
width = document.body.clientWidth; //网页可见区域宽
height = document.body.clientHeight; //网页可见区域高
}
alert(width);
alert(height);
관련 권장 사항:
위 내용은 JavaScript에서 innerWidth 및 innerHeight 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!