¿Cuál es la diferencia entre ancho, ancho interno y ancho externo, altura, altura interna y altura externa en jQuery

124

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

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(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
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

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

Gracias.

— zajke
fuente

8

¿Viste la documentación de jQuery?

— Brad M

1

Intente agregar relleno, borde y margen a su <div>, y vea si eso da resultados diferentes;)

— Niet the Dark Absol

44

api.jquery.com/category/dimensions Esa página los describe a todos, y si hace clic en cada uno, obtendrá aún más información.

— JClaspill

He buscado en google, pero ninguna de las respuestas satisface mis expectativas.

— zajke

@BradM - Ningún hombre. Pero los resultados de "diferencia entre ancho, ancho interno, ancho externo jquery" nada me dice en lo esencial.

— zajke

282

¿Viste estos ejemplos? Se parece a tu pregunta.

Trabajando con anchos y alturas

ingrese la descripción de la imagen aquí

jQuery - Dimensiones

jQuery: altura, ancho, interior y exterior

— zod
fuente

1

mejor respuesta

— Benjamin

Acabo de publicar una respuesta a continuación ya que en este momento veo un comportamiento diferente entre las dos opciones que su descripción no infiere

— GWorking

16

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
externalWidth / exteriorHeight: incluye relleno, borde y, opcionalmente, margen
altura / ancho: altura del elemento (sin relleno, sin margen, sin borde)

— Defecto
fuente

4

ancho = obtener el ancho,
innerWidth = obtener ancho + relleno,
externalWidth = obtener ancho + relleno + borde y opcionalmente el margen

Si desea probar, agregue un poco de relleno, márgenes, bordes a sus clases .test e intente nuevamente.

También lea en los documentos de jQuery ... Todo lo que necesita está prácticamente allí

— Chris G-Jones
fuente

2

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

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
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 (supongamos que var es pads), la instrucción correcta para que jquery obtenga el mismo resultado que js puro (o 'ancho' del parámetro css) es:

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

También podemos señalar que para:

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

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

Atentamente

Triplemente

Nota: en mi opinión, esto puede considerarse 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 los 'parámetros' aceptado, que tiene interés pero debe ser siempre claro. Para este caso: "ancho interno" no significará lo mismo que "ancho". Podemos encontrar una pista de este problema en la documentación de .width (valor) con la frase: "Tenga en cuenta que en los navegadores modernos, la propiedad de ancho CSS no incluye relleno"

— usuario161546
fuente

Giro agregado: .css('width')es lo mismo que .outerWidth()(es decir, incluye el borde y el relleno) cuando box-sizing: border-box;.

— Bob Stein

0

De acuerdo con todas las respuestas dadas anteriormente. Solo agregar en términos de perspectivas de ventana o navegador innerWidth/ innerheightincluye solo el área de contenido de la ventana, nada más, pero

outerWidth/ outerHeight incluye el área de contenido de Windows y además de esto también incluye cosas como barras de herramientas, barras de desplazamiento, etc. y estos valores siempre serán iguales o mayores que los valores innerWidth / innerHeight.

Espero que ayude más ...

— Alok Ranjan
fuente

0

Lo que estoy viendo ahora es que innerWidthincluye todo el contenido.

Esto es, si la ventana es 900pxy el contenido es 1200px(y hay un desplazamiento)

innerWidth me da 1200px
outerWidth me da 900px

Totalmente inesperado en mis ojos

* En mi caso, el contenido está contenido en un <iframe>

— GTrabajo
fuente