Método innerWidth() de jQuery

jQuery HTML/Métodos CSS

El método innerWidth() obtiene o establece el ancho interno del elemento seleccionado (incluso padding, pero no margin y border).

Al usar el método innerWidth()Obteneral establecer el ancho, devolveráEl primer elemento seleccionadoancho.

Al usar el método innerWidth()Estableceral establecer el ancho, estableceráTodos los elementos seleccionadosancho.

Como se muestra en la imagen siguiente, el método innerWidth() incluye padding, pero no incluye margin y border:

El valor de ancho también puede ser relativo. Si se proporciona un valor con+=-Una secuencia de caracteres, se calcula el ancho objetivo sumando o restando el número proporcionado desde el valor actual (por ejemplo, innerWidth("-= 100”）。

Sintaxis:

Obtener el ancho interno:

$(selector).innerWidth()

Configura el ancho interno:

$(selector).innerWidth(value)

Ejemplo

Obtener el ancho interno del elemento DIV:

$("div").click(function(){
　　$(this).innerWidth();
});

Configura el ancho interno de todos los párrafos:

$("button").click(function(){
　　$("p").innerWidth("100);
});

Configura el ancho interno de todos los párrafos utilizando diferentes configuraciones de unidades:

$("#btn1").click(function(){
　　$("p").innerWidth("100);
});
$("#btn2").click(function(){
　　$("p").innerWidth("10em");
});
$("#btn3").click(function(){
　　$("p").innerWidth("100vw");
});

Mostrar la diferencia entre width(), height(), innerHeight(), innerWidth(), outerWidth() y outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Valor del parámetro

jQuery HTML/Métodos CSS