js는 실시간으로 브라우저 창 크기를 가져오며 이를 달성하기 위해 addEventListener() 메서드를 사용할 수 있습니다. addEventListener() 메서드는 window.addEventListener('resize', ...)와 같은 브라우저 창 크기 조정 이벤트를 수신하는 이벤트 핸들러를 등록할 수 있습니다.
이제 특정 코드 예제를 기반으로 브라우저 창 크기를 실시간으로 가져오는 js의 방법을 소개하겠습니다.
코드 예제는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>js实时获取浏览器窗口大小示例</title>
</head>
<body>
<div id="result"></div>
<script>
// 定义事件侦听器函数
function displayWindowSize(){
// 获取窗口的宽度和高度，不包括滚动条
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// 在div元素中显示结果
document.getElementById("result").innerHTML = "宽: " + w + ", " + "高: " + h;
}
// 将事件侦听器函数附加到窗口的resize事件
window.addEventListener("resize", displayWindowSize);
// 第一次调用该函数
displayWindowSize();
</script>
</body>
</html>위 코드에서는 (clientWidth 및 clientHeight 속성을 통해) 창 너비와 높이를 얻기 위해 displayWindowSize 함수를 사용자 정의한 다음 addEventListener() 메서드에 두 개를 추가합니다. 매개변수, 즉 "resize", "displayWindowSize"입니다.
첫 번째 매개변수는 창 크기를 실시간으로 모니터링할 수 있으며, 창이 바뀔 때마다 두 번째 매개변수인 displayWindowSize 함수가 호출됩니다.
아래와 같이 현재 일반 브라우저 창 크기를 가져옵니다.
브라우저 창을 축소하면 얻은 크기는 다음과 같습니다.
창을 줄인 후에는 새로 고칠 필요가 없습니다. 획득한 크기도 실시간으로 표시됩니다.
Note: EventTarget.addEventListener() 메서드는 지정된 리스너를 EventTarget 에 등록합니다. 개체가 지정된 이벤트를 트리거하면 지정된 콜백 함수가 실행됩니다. 이벤트 대상은 문서 요소 Element, Document 및 Window 또는 이벤트를 지원하는 기타 개체(예: XMLHttpRequest)일 수 있습니다.
이 기사는 js를 사용하여 브라우저 창 크기를 실시간으로 얻는 구체적인 방법에 관한 것입니다. 그것이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 js를 사용하여 실시간으로 브라우저 창 크기를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
