> 웹 프론트엔드 > JS 튜토리얼 > window.screen 객체의 응용을 간략히 이해하세요.

window.screen 객체의 응용을 간략히 이해하세요.

WBOY
풀어 주다: 2022-08-05 10:34:25
원래의
1898명이 탐색했습니다.

이 글에서는 window.screen 객체의 적용과 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. window.screen 객체에는 사용자의 화면에 대한 정보가 포함되어 있으므로 함께 살펴보시기 바랍니다. 모두에게 도움이 되세요.

window.screen 객체의 응용을 간략히 이해하세요.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end

Window 객체

모든 브라우저는 window 객체를 지원합니다. 브라우저 창을 나타냅니다.

모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.

전역 변수는 창 개체의 속성입니다.

전역 함수는 창 개체의 메서드입니다.

HTML DOM의 문서도 창 객체의 속성 중 하나입니다:

window.document.getElementById("header");
로그인 후 복사

동일:

document.getElementById("header");
로그인 후 복사

창 크기

브라우저 창의 크기를 결정하는 세 가지 방법이 있습니다(브라우저의 뷰포트 , 도구 모음 및 스크롤 막대 제외).

Internet Explorer, Chrome, Firefox, Opera 및 Safari의 경우:

window.innerHeight - 브라우저 창의 내부 높이 window.innerWidth - 브라우저 창의 내부 너비

Internet Explorer 8, 7, 6, 5의 경우 :

document.documentElement.clientHeight document.documentElement.clientWidth
로그인 후 복사

또는

document.body.clientHeight document.body.clientWidth
로그인 후 복사

실용적인 JavaScript 솔루션(모든 브라우저에 적용):

Example

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
로그인 후 복사

이 예는 브라우저 창의 높이와 너비를 보여줍니다. (도구 모음/스크롤 막대 제외)

Window Screen

window . 화면 개체에는 사용자 화면에 대한 정보가 포함되어 있습니다.

window.screen 개체는 창 접두어 없이 작성할 수 있습니다.

일부 속성:

  • screen.availWidth - 사용 가능한 화면 너비

  • screen.availHeight - 사용 가능한 화면 높이

Window Screen screen.availWidth 속성은 방문자 화면의 사용 가능한 너비를 반환합니다. 너비(픽셀)에서 창 작업 표시줄과 같은 인터페이스 기능을 뺀 값입니다.

Example

화면의 사용 가능한 너비를 반환합니다.

<script>
document.write("可用宽度: " + screen.availWidth);
</script>
로그인 후 복사

위 코드의 출력은 다음과 같습니다.

window.screen 객체의 응용을 간략히 이해하세요.

Window Screen Available Height

screen.availHeight 속성은 방문자의 화면 높이를 반환합니다. , 픽셀 단위에서 창 작업 표시줄과 같은 인터페이스 기능을 뺀 값입니다.

Instance

사용 가능한 화면 높이를 반환합니다.

<script>
document.write("可用高度: " + screen.availHeight);
</script>
로그인 후 복사

위 코드는 다음을 출력합니다.

window.screen 객체의 응용을 간략히 이해하세요.

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

위 내용은 window.screen 객체의 응용을 간략히 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿