Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

jQuery (VII)

Obtener medidas

Introducción

Muchas veces necesitamos saber las medidas de los elementos de la página, de la ventana del navegador, o la resolución de pantalla. No siempre es sencillo obtener estos datos con javascript, sin embargo utilizando jQuery podemos obtenerlos de una forma más sencilla.

Tenemos varios métodos en jQuery para obtener estos datos, veámoslos a continuación.

métodos .width() y .height()

Estos métodos nos dan respectivamente la anchura y la altura del elemento. El resultado no tiene en cuenta ni los margenes externos (margin), ni los márgenes internos(padding), ni el borde (border). El resultado es el número de pixels.

ancho=$("#menu").width(); alto=$("#menu").height();

Obtenemos en este ejemplo la altura y anchura del elemento con id="menu". Si el selector indicara más de un elemento (por ejemplo $("p")), al ser esta una propiedad de lectura, sólo se leería el primero, para leer todos deberíamos usar la propiedad .each(), ya vista en páginas anteriores.

Vamos a hacer un ejemplo en el que obtenemos la altura y anchura del menú lateral de esta página, y también del menú de navegacion horizontal.

Una vez obtenidos los datos, los sacamos en pantalla en el recuadro que tenemos aquí a la derecha (con div="capa1").

Aprovecharemos para ver algunos métodos ya vistos en páginas anteriores, de esta manera, además de ver cómo sacar los elementos en pantalla, les añadiremos el estilo CSS.

Los menús lateral y de navegación de esta página tienen respectivamente los id="menu" y id="navegacion". El código que hemos utilizado para sacar los datos en pantalla es el siguiente.

$(document).ready(function(){ 
   //obtener el ancho y alto del elemento "menu": metodos .width() y .height()
   anchoMenu=$("#menu").width();
   altoMenu=$("#menu").height();
   //pasarlo a un texto para sacarlo en pantalla; lo guardamos en una variable.
   p1="<p>Menu lateral:</p><p> Altura = "+altoMenu+" px; Anchura = "+anchoMenu+" px.</p>";
   //Seguimos el mismo procedimiento para el elemento "navegacion"
   anchoNav=$("#navegacion").width();
   altoNav=$("#navegacion").height();
   p2="<p>Menu Navegacion:</p><p> Altura = "+altoNav+" px; Anchura = "+anchoNav+" px.</p>";
   //escribir los datos en la pantalla: utilizamos el método .append()
   $("#capa1").append("<h1 id='c1'>Elementos de la página</h1>");
   $("#capa1").append(p1);
   $("#capa1").append(p2);
   //dar estilo CSS a los datos anteriores: metodo .css()
   $("#capa1 h1").css({"font":"italic 18px verdana","color":"olive"});
   $("#capa1 p").css({"font":"normal 13px verdana","color":"navy"});
});

El código viene comentado para una mayor comprensión. Vemos como en primer lugar obtenemos los datos, después los sacamos en pantalla, y por último les cambiamos el estilo CSS.

Métodos innerWidth() y innerHeight

Estos métodos devuelven también la anchura y altura del elemento, pero a diferencia de los anteriores, aquí se incluye también las dimensiones del margen interno (padding).

$("#menu").innerWidth();

Mide la anchura del elemento incluido el margen interno (padding).

$("#menu").innerHeight();

Mide la altura del elemento incluido el margen interno (padding).

Métodos outerWidth() y outerHeight

Estos métodos devuelven la anchura y altura del elemento incluidos el margen interno y el borde (border)

$("#menu").outerWidth();

Mide la anchura del elemento incluido el margen interno (padding) y el borde (border).

$("#menu").outerHeight();

Mide la altura del elemento incluido el margen interno (padding) y el borde (border).

Ninguno de estos métodos que hemos visto hasta ahora recibe ningún parámento ( no escribimos nada dentro del paréntesis), sin embargo a estos dos últimos métodos podemos pasarles el parámetro true, para que la medida incluya también el margen externo (margin):

$("#menu").outerWidth(true);

Mide la anchura del elemento incluido el margen interno (padding), el borde (border) y el margen externo (margin).

$("#menu").outerHeight(true);

Mide la altura del elemento incluido el margen interno (padding), el borde (border) y el margen externo (margin).

Medidas del navegador

Mediante estos métodos podemos acceder también a las medidas del documento en la pantalla, y de la ventana del navegador:

$(document).heigth();
$(document).width();

Si pasamos como selector la palabra document (sin comillas), accedemos a la altura y la anchura de la página. Debemos tener en cuenta que la altura y anchura de la página pueden ser más grandes de lo que se ve en pantalla, pues pueden tener barras de desplazamiento.

$(window).heigth();
$(window).width();

Si pasamos como selector la palabra window (sin comillas), accedemos a la altura y la anchura de la ventana del navegador, es decir la parte visible de la página.

Por otra parte recordemos que para obtener el ancho y alto de la pantalla, es decir su resolución, podiamos hacerlo mediante los métodos de javascript:

screen.heigth;
screen.width;

Aquí hemos hecho un pequeño ejercicio en el que dentro de un div con id="capa2" hemos buscado las dimensiones, del documento, de la ventana del navegador, y de la pantalla. El resultado puedes verlo aquí a la derecha.

El código que hemos utilizado para este ejercicio es el siguiente:

$(document).ready(function(){ 
   $("#capa2").append("<h2>Dimensiones de la página</h2>")
   altov=$(window).height();
   anchov=$(window).width();
   p1="<p>Ventana: alto = "+altov+", ancho = "+anchov+"</p>";
   $("#capa2").append(p1);
   altod=$(document).height();
   anchod=$(document).width();
   p2="<p>Documento: alto = "+altod+", ancho = "+anchod+"</p>";
   $("#capa2").append(p2);
   altop=screen.height;
   anchop=screen.width;
   p3="<p>Pantalla: alto = "+altop+", ancho = "+anchop+"</p>";
   $("#capa2").append(p3);
   $("#capa2 h2").css({"font":"italic 18px verdana","color":"olive"});
   $("#capa2 p").css({"font":"normal 13px verdana","color":"navy"});
});

métodos offset() y position()

Estos métodos indican la posición de un elemento dentro del documento, es decir los píxeles que hay desde la esquina superior izquierda del documento a la esquina superior izquierda del elemento. Estos métodos tienen a su vez dos atributos, top y left, que son los que realmente nos indican la posición del elemento.

Por ejemplo, queremos saber la posición del elemento con "id="caja2", de esta página, haríamos el slguiente código:

$(document).ready(function(){ 
   distancia=$("#capa2").offset();
   posx=distancia.left;
   posy=distancia.top;
   texto="posicion de caja2: horizontal = "+posx+", vertical = "+posy;
   $("#respuesta1").html(texto);
});

Hemos recogido los datos posteriormente en un texto y los hemos sacado en pantalla, lo que obtendremos sera algo parecido a esto:

los números salen aquí con bastantes decimales, para evitarlos podemos usar cualquier función del objeto "Math" de redondeo.

En el ejemplo anterior utilizamos el método .offset. Podemos utilizar también el método .position() de la misma manera. La diferencia entre ambos está en que .offset() tiene en cuenta todos los márgenes del elemento al calcular las distancias, mientras que .position() no tiene en cuenta márgenes ni bordes.

En la próxima página veremos cómo se trabaja con los eventos mediante jQuery.

Eventos

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com