¿Cuál es la diferencia entre el ancho, el ancho interior y el ancho externo, la altura, la altura interior y la altura exterior en jQuery?

Escribí un ejemplo para ver cuál es la diferencia, pero me muestran los mismos resultados para ancho y alto.

    $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = div.outerHeight(); // 150 px });   .test { width: 200px; height: 150px; background: black; }    

En este ejemplo, puede ver que generan los mismos resultados. Si alguien sabe cuál es la diferencia, por favor muéstrame la respuesta adecuada.

Gracias.

¿Viste estos ejemplos? Se parece a tu pregunta.

Trabajando con anchos y alturas

enter image description here

jQuery – Dimensiones

jQuery: altura, ancho, interior y exterior

Como se menciona en un comentario, la documentación le dice exactamente cuáles son las diferencias. Pero en resumen:

  • innerWidth / innerHeight – incluye relleno pero no borde
  • outerWidth / outerHeight: incluye relleno, borde y, opcionalmente, margen
  • alto / ancho – altura del elemento (sin relleno, sin margen, sin borde)
  • ancho = obtener el ancho,

  • innerWidth = obtener ancho + relleno,

  • outerWidth = obtener ancho + relleno + borde y opcionalmente el margen

Si desea probar, agregue algunos rellenos, márgenes, bordes a sus clases .test e intente de nuevo.

También lea en los documentos jQuery … Todo lo que necesita está más o menos allí

Parece necesario contar sobre las asignaciones de valores y comparar el significado del parámetro “ancho” en jq: (suponiendo que se define new_value en la unidad px)

 jqElement.css('width',new_value); jqElement.css({'width: ;'}); getElementById('element').style.width= new_value; 

Las tres instrucciones no dan el mismo efecto: porque la primera instrucción jquery define el ancho interno del elemento y no el “ancho”. Esto es complicado.

Para obtener el mismo efecto, debe calcular los rellenos antes (suponga que var es pads), la instrucción correcta para jquery para obtener el mismo resultado que js puro (o el parámetro css ‘width’) es:

 jqElement.css('width',new_value+pads); 

También podemos notar que para:

 var w1 = jqElement.css('width'); var w2 = jqelement.width(); 

w1 es el ancho interno, mientras que w2 es el ancho (significado del atributo css) Diferencia que no está documentada en la documentación de la API de JQ.

Atentamente

Trebly


Nota: en mi opinión esto se puede considerar como un error JQ 1.12.4. La forma de salir debería ser introducir definitivamente una lista de parámetros aceptados para .css (‘parámetro’, valor) porque hay varios significados detrás de ‘parámetros’ aceptado, que tiene interés pero debe ser siempre claro. Para este caso: ‘innerwidth’ no significará lo mismo que ‘ancho’. Podemos encontrar un seguimiento de este problema en la documentación de .width (value) con la frase: “Tenga en cuenta que en los navegadores modernos, la propiedad de ancho de CSS no incluye relleno”