⊗jqDmOwOhM 68 of 113 menu

Métodos outerWidth y outerHeight en jQuery

El último par de métodos - outerWidth y outerHeight, con los cuales es posible obtener el ancho y alto de un elemento teniendo en cuenta todos los márgenes y bordes, o se pueden excluir los márgenes externos margin.

Consideremos un ejemplo. Supongamos que tenemos un párrafo:

<p id="test">text</p> <p id="out"></p>

El CSS se ve así:

p { margin: 10px; padding: 5px; border: 2px solid blue; }

Obtengamos los valores de ancho y alto del párrafo #test, teniendo en cuenta los rellenos internos y bordes, para esto es necesario pasar false a estos métodos o dejar los paréntesis vacíos (ya que está establecido por defecto en el método):

let w = $('#test').outerWidth(false); let h = $('#test').outerHeight(); $('#out').text('Width: ' + w + ' Height: ' + h);

Ahora nuestros valores diferirán en 4px más, ya que el grosor del borde es de 2px en cada lado.

Y ahora obtengamos los valores de ancho y alto del párrafo #test, teniendo en cuenta todos los márgenes y bordes, para esto es necesario pasar true a los métodos outerWidth y outerHeight:

let w = $('#test').outerWidth(true); let h = $('#test').outerHeight(true); $('#out').text('Width: ' + w + ' Height: ' + h);

Ahora nuestros valores diferirán de los anteriores en 20px más, ya que los márgenes externos son de 10px en cada lado.

Complemente la solución de las tareas anteriores - muestre en el tercer párrafo bajo el div #wrapper los valores de ancho y alto del div #wrapper - con rellenos internos y bordes incluidos, pero sin márgenes externos. En el cuarto párrafo muestre los valores de ancho y alto del div #wrapper con todos los márgenes y bordes incluidos.

También con los métodos outerWidth y outerHeight podemos cambiar los valores de ancho y alto de los elementos. Por ejemplo, establezcamos el ancho del div #test1 en 250px, y la altura de #test2 - en 200px:

$('#test1').outerWidth(250, true); $('#test2').outerHeight(200);

Todos los métodos mencionados para trabajar con dimensiones de elementos también permiten la aplicación de una función a cada elemento en el conjunto.

Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar