Impostazione della larghezza come percentuale utilizzando jQuery

Come posso impostare la larghezza di un div come percentuale usando jQuery?

jquery width

— Prasad
fonte

135

Utilizzando la funzione di larghezza :

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

girerà:

<div id="somediv" />

in:

<div id="somediv" style="width: 70%;"/>

— Darin Dimitrov
fonte

ho la larghezza in una variabile! Come posso arrivare alla larghezza% ??

— Hemnath Mouli

@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");

— Zorgatone

Ho un elemento con una larghezza del 24%, impostando la larghezza come suggerisci a 11% mi dà invece una larghezza del 33%. Ho pensato che stesse aggiungendo la larghezza alla larghezza esistente, ma come puoi vedere 24 + 11 = 35 e non 33. Potresti avere qualche idea sul motivo per cui questo accade?

— Eugene

So che questo è un vecchio post, ma mi sono imbattuto in esso poiché è il primo risultato su Google. Ho notato che la funzione css () è un po 'più veloce di width (), forse mi sbaglio.

— Dohab

Stavo cercando di impostare una larghezza utilizzando .width("20%")tuttavia l'elemento continuava a essere impostato width: 24%. Dopo aver esaminato i documenti, risulta che questo è correlato alla box-sizingproprietà CSS . L'utilizzo .css({'width':"20%"})eviterà questa regolazione.

— khartnett

Hemnath

Se la tua variabile è la percentuale:

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

Se la tua variabile è in pixel e desideri la percentuale che occupa del genitore:

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

— Jonathan Elder
fonte

Ecco un'alternativa che ha funzionato per me:

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

— joaorodr84
fonte