JavaScript의 innerWidth 및 innerHeight 정보-PHP 튜토리얼-php.cn

JavaScript의 innerWidth 및 innerHeight 정보

一个新手

풀어 주다： 2023-03-16 15:44:02

원래의

1413명이 탐색했습니다.

innerWidth 및 innerHeight 속성

설명: 창 개체의 읽기 전용 속성은 창의 문서 표시 영역의 높이와 너비를 픽셀(px) 단위로 선언합니다. (참고: 여기의 너비와 높이는 메뉴 표시줄, 도구 모음, 스크롤 막대 등의 높이를 포함하지 않습니다.)

다음은 이 두 가지 속성을 확인합니다:

화면 해상도: 1920x1080 브라우저: QQ 브라우저(커널) 크롬) 코드는 다음과 같습니다.

 var width=window.innerWidth,height=window.innerHeight;         //分别定义width和height接收窗口的高和宽
     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>=
                     width=window.innerWidth,height=
                     alert(height);   　　</script>
        </body>
　　 </html>

로그인 후 복사

결론: 내부 스크롤 막대가 존재하더라도 너비에 영향을 미치지 않음을 의미합니다. 1920px

최종 결론: innerHeight. 및 innerWidth는 양식을 얻습니다. 높이와 너비, (브라우저 개발자 옵션, 즐겨찾기)와 같은 외부 요소는 영향을 미치지만 내부 요소(스크롤 막대)는 영향을 미치지 않습니다.

IE에 대해 다음과 같이 이야기해 보겠습니다. 가장 큰 결점은 IE 호환성 문제는 이렇게 해결할 수 있습니다

//兼容代码可以这样子写var width = window.innerWidth,height = window.innerHeight;if (typeof width != &#39;number&#39;) {       //如果类型不为number,表示该浏览器不支持innerWidth属性

    if (document.compatMode == &#39;CSS1Compat&#39;) {          //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 중국어 웹사이트의 기타 관련 기사를 참조하세요!