Establecer el ancho como un porcentaje usando jQuery

85

¿Cómo puedo establecer el ancho de un div como porcentaje usando jQuery?

jquery width Prasad
fuente

Respuestas:

133

Usando la función de ancho :

$('div#somediv').width('70%');

girará:

<div id="somediv" />

dentro:

<div id="somediv" style="width: 70%;"/>
Darin Dimitrov
fuente
3
¡Tengo ancho en una variable! ¿Cómo puedo llegar al% de ancho?
hemnath mouli
2
@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");
Zorgatone
Tengo un elemento con un ancho del 24%, establecer el ancho como sugieres en 11% me da un ancho del 33%. Pensé que estaba agregando el ancho al ancho existente, pero como puede ver, 24 + 11 = 35 y no 33. ¿Podría tener alguna idea de por qué sucede esto?
Eugene
Sé que esta es una publicación antigua, pero me la encontré ya que es el primer resultado en Google. He notado que la función css () es un poco más rápida que width (), tal vez me equivoque.
Dohab
1
Estaba tratando de establecer un ancho usando, .width("20%")sin embargo, el elemento siguió configurándose width: 24%. Después de buscar en los documentos, resulta que esto está relacionado con la box-sizingpropiedad CSS . El uso .css({'width':"20%"})evitará este ajuste.
khartnett
14

Hemnath

Si su variable es el porcentaje:

var myWidth = 70;
$('div#somediv').width(myWidth + '%');

Si su variable está en píxeles y desea el porcentaje que ocupa del padre:

var myWidth = 140;
var myPercentage = (myWidth / $('div#somediv').parent().width()) * 100;
$('div#somediv').width(myPercentage + '%');
Jonathan Elder
fuente
13

Aquí hay una alternativa que funcionó para mí:

$('div#somediv').css({'width': '70%'});
joaorodr84
fuente