JavaScript의 innerWidth 및 innerHeight에 대한 자세한 설명
- 黄舟원래의
- 2017-10-12 10:50:461727검색
아래 편집기에서는 JavaScript의 innerWidth 및 innerHeight에 대해 간략하게 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터를 따라가서 함께 살펴볼까요
innerWidth 및 innerHeight 속성
설명: 창 개체의 읽기 전용 속성은 창의 문서 표시 영역의 높이와 너비를 선언합니다. 픽셀(px). (참고: 여기의 너비와 높이는 메뉴 표시줄, 도구 모음, 스크롤 막대 등의 높이를 포함하지 않습니다.)
다음은 이 두 가지 속성을 확인합니다:
화면 해상도: 1920x1080 브라우저: QQ 브라우저(커널은 Chrome) 코드는 다음과 같습니다.
var width=window.innerWidth,height=window.innerHeight; //창의 높이와 너비를 수신하기 위해 너비와 높이를 각각 정의합니다
alert(width) ; //Window's 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>결론: 내부 스크롤 막대가 없다는 의미입니다. innerWidth에 대한 영향은 존재하더라도 너비에 영향을 미치지 않으며 여전히 동일합니다 1920px
최종 결론: innerHeight 및 innerWidth는 (브라우저 개발자) 폼의 높이와 너비를 얻습니다. 옵션, 즐겨찾기)가 영향을 주지만 내부 요소(스크롤 막대)에는 영향이 없습니다
IE에 대해 이야기해 보겠습니다. IE 호환성 문제는 다음과 같이 해결할 수 있습니다
위 내용은 JavaScript의 innerWidth 및 innerHeight에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!