Método width() de jQuery

HTML de jQuery/Métodos CSS

El método width() obtiene o establece el ancho del elemento seleccionado.

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

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

Como se muestra en la imagen siguiente, el método width() no incluye relleno, borde o márgenes:

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

Sintaxis:

Obtener el ancho:

$(selector).width()

Establecer el ancho:

$(selector).width(value)

Establecer el ancho usando una función:

$(selector).width(function(index, currentWidth))

Ejemplo

Obtener el ancho del elemento DIV:

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

Establecer el ancho de todos los párrafos:

$("button").click(function(){
　　$("p").width(250);
});

Establecer el ancho de todos los párrafos con diferentes unidades:

$("#btn1").click(function(){
　　$("p").width(250);
});
$("#btn2").click(function(){
　　$("p").width("7em");
});
$("#btn3").click(function(){
　　$("p").width("100vw");
});

Al hacer clic en el botón,减小所有段落的宽度（使用函数）:

$("button").click(function(){
　　$("p").width(function(i, val){
　　　　　　　　return val　-　50;
　　});
});

El método width() también puede encontrar el ancho de la ventana y el documento:

$(window).width();//　Devuelve el ancho de la ventana del navegador
$(document).width();　　//Devuelve el ancho del documento HTML

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

HTML de jQuery/Métodos CSS