jquery로 페이지의 너비와 높이를 얻는 방법
May 18, 2023 pm 04:40 PM프론트엔드 개발에서는 페이지 크기에 따라 레이아웃을 지정하거나 동적으로 조정하기 위해 페이지의 너비와 높이를 구해야 하는 경우가 많습니다. jQuery에서는 다음 방법을 통해 페이지 너비와 높이를 얻을 수 있습니다.
1. 페이지의 너비와 높이를 얻으려면 .width() 및 .height() 메서드를 사용하세요.
jQuery는 .width() 및 .height() 메서드를 포함한 일련의 크기 획득 메서드를 제공합니다. 요소의 너비와 높이를 얻는 데 사용됩니다. 전체 문서 페이지의 경우 본문 요소의 너비와 높이를 가져와 페이지 크기를 얻을 수 있습니다. 샘플 코드는 다음과 같습니다.
var pageWidth = $('body').width(); var pageHeight = $('body').height(); console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight);
페이지가 동적 조정 상태일 수 있으므로 획득한 페이지 크기가 최종 크기가 아닐 수 있다는 점에 유의하시기 바랍니다. 최종 페이지 크기를 얻으려면 창 로드 이벤트에서 위 코드를 래핑하여 크기를 얻기 전에 페이지가 완전히 로드되었는지 확인할 수 있습니다. 샘플 코드는 다음과 같습니다.
$(window).load(function(){ var pageWidth = $('body').width(); var pageHeight = $('body').height(); console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight); });
2. $(window) 객체를 사용하여 페이지의 너비와 높이를 가져옵니다
또 다른 방법은 $(window) 객체를 사용하여 페이지의 너비와 높이를 가져오는 것입니다. . $(window) 객체는 브라우저 창 객체를 나타내므로 이 객체를 통해 현재 창 크기, 즉 페이지 크기를 얻을 수 있습니다. 샘플 코드는 다음과 같습니다.
var pageWidth = $(window).width(); var pageHeight = $(window).height(); console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight);
획득한 페이지 크기가 최종 크기가 아닐 수도 있으므로 위 코드를 창 로딩 이벤트에 래핑하여 획득하기 전에 페이지가 완전히 로드되었는지 확인할 수도 있습니다. 크기. 샘플 코드는 다음과 같습니다.
$(window).load(function(){ var pageWidth = $(window).width(); var pageHeight = $(window).height(); console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight); });
3. document.documentElement.clientWidth 및 document.documentElement.clientHeight를 사용하여 페이지 너비와 높이를 가져옵니다.
페이지 너비와 높이를 가져오는 또 다른 방법은 document.documentElement를 사용하는 것입니다. clientWidth 및 document.documentElement.clientHeight 속성. 이 두 속성은 각각 현재 웹페이지의 표시 영역인 문서 뷰포트의 너비와 높이를 나타냅니다. 코드 예시는 다음과 같습니다.
var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight; console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight);
획득한 페이지 크기가 최종 크기가 아닐 수도 있으므로 위 코드를 창 로딩 이벤트에 래핑하여 획득하기 전에 페이지가 완전히 로드되었는지 확인할 수도 있습니다. 크기. 샘플 코드는 다음과 같습니다.
$(window).load(function(){ var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight; console.log('页面宽度:' + pageWidth + ',页面高度:' + pageHeight); });
요약:
위 세 가지 방법으로 얻은 효과는 페이지의 너비와 높이를 얻는 것입니다. 어떤 방법을 사용할지는 특정 요구 사항과 프로젝트 현실에 따라 다릅니다. 그러나 한 가지 주의할 점은 얻은 페이지 크기가 최종 크기가 아닐 수 있으므로 크기를 얻기 전에 페이지가 완전히 로드되었는지 확인하기 위해 창 로딩 이벤트에 코드를 래핑하는 것이 가장 좋습니다.
위 내용은 jquery로 페이지의 너비와 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?

React Reconciliation 알고리즘은 어떻게 작동합니까?

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?
