Programar en javascript puede ser más fácil sabiendo utilizar jQuery
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 130
Visitas el mes pasado: 233
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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.
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).
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).
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"}); });
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.
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