Repaso a las funciones de jQuery innerWidth() y outerWidth(), la funcionalidad de estas es la de obtener el ancho de los elementos de la web contemplando los márgenes.
Otras funciones similares en jQuery son:
La funcionalidad de innerWidth() es la de obtener el ancho de un elemento teniendo en cuenta el padding (margen interno) pero no el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding.
La funcionalidad de outerWidth() es la de obtener el ancho de un elemento teniendo en cuenta el padding (margen interno) incluyendo el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding + borde.
Veamos la sintaxis extraída de su página web oficial:
$(selector).innerWidth()
Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el ancho.
Veamos la sintaxis extraída de su página web oficial:
$(selector).outerWidth()
Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el ancho.
Vamos con este ejemplo de jQuery innerWidth():
$(document).ready(function(){ $("#boton").click(function(){ alert('El ancho del div es de: ' + $("#parrafo").innerWidth() + 'pixels'); }); });
Os explico el ejemplo :
El código HTML de los botones y el párrafo es el siguiente:
<div id="elemento"> <p id="parrafo" style="width:180px; padding: 0 5px 0 5px;">Esto es un texto en un párrafo de un div</p> </div> <p><input id="boton" type="button" value="Obtener ancho"></p>
Si os fijáis el mensaje que sale por pantalla muestra que el ancho son 190 pixels, se debe a la suma de los 180 del párrafo más los 5+5 del padding.
Turno para el ejemplo de jQuery outerWidth():
$(document).ready(function(){ $("#boton").click(function(){ alert('El ancho del div es de: ' + $("#parrafo").outerWidth() + 'pixels'); }); });
Os explico el ejemplo :
El código HTML de los botones y el párrafo es el siguiente:
<div id="elemento"> <p id="parrafo" style="width:180px; padding: 0 5px 0 5px; border: 2px solid;">Esto es un texto en un párrafo de un div</p> </div> <p><input id="boton" type="button" value="Obtener alto"></p>
Si os fijáis el mensaje que sale por pantalla muestra que el ancho son 194 pixels, se debe a la suma de los 180 del párrafo más los 5+5 del padding y los 2 + 2 del ancho del borde.