jQuery se puede usar para obtener las dimensiones de la página actual. Las dimensiones incluyen la pantalla, la ventana gráfica y la altura y el ancho del documento.
- Obtener las dimensiones de la ventana: El tamaño de la ventana es el tamaño de la ventana del navegador. Este es el tamaño que cambia cuando se cambia el tamaño del navegador. Se puede acceder a la altura y el ancho de las ventanas con el método height() y width() después de seleccionar el objeto de la ventana.
- Obtener las dimensiones del documento: El tamaño del documento es el tamaño del documento HTML. Se puede acceder a la altura y el ancho de los documentos con el método height() y width() después de seleccionar el objeto del documento.
- Obtener las dimensiones de la pantalla: El tamaño de la pantalla es el tamaño total de la pantalla del usuario. Se puede acceder al alto y ancho de la pantalla con la propiedad alto y ancho.
Ejemplo:
<!DOCTYPE html>
<head>
<title>
Get the size of the screen, current
web page and browser window using
jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to get the size of the screen,
current web page and browser
window using jQuery?
</b>
<p>Window Height is:
<span class="windowHeight"></span>
</p>
<p>Windows Width is:
<span class="windowWidth"></span>
</p>
<p>Document Height is:
<span class="documentHeight"></span>
</p>
<p>Document Width is:
<span class="documentWidth"></span>
</p>
<p>Screen Height is:
<span class="screenHeight"></span>
</p>
<p>Screen Width is:
<span class="screenWidth"></span>
</p>
<button id="btn">
Click Here to check the dimensions
of the page:
</button>
<script type="text/javascript">
$("#btn").on("click", function () {
windowHeight = $(window).height();
windowWidth = $(window).width();
documentHeight = $(document).height();
documentWidth = $(document).width();
screenHeight = screen.height;
screenWidth = screen.width;
document.querySelector('.windowHeight').textContent
= windowHeight;
document.querySelector('.windowWidth').textContent
= windowWidth;
document.querySelector('.documentHeight').textContent
= documentHeight;
document.querySelector('.documentWidth').textContent
= documentWidth;
document.querySelector('.screenHeight').textContent
= screenHeight;
document.querySelector('.screenWidth').textContent
= screenWidth;
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA