¿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.

javascript jquery css dom styles 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

Respuestas:

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