Definir a largura como uma porcentagem usando jQuery

85

Como posso definir a largura de um div como porcentagem usando jQuery?

jquery width Prasad
fonte

Respostas:

133

Usando a função de largura :

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

vai virar:

<div id="somediv" />

para dentro:

<div id="somediv" style="width: 70%;"/>
Darin Dimitrov
fonte
3
eu tenho largura em uma variável! Como posso chegar a% width ??
Hemnath Mouli de
2
@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");
Zorgatone de
Eu tenho um elemento com uma largura de 24%, definir a largura como você sugere como 11% me dá uma largura de 33%. Pensei que estava adicionando a largura à largura existente, mas como você pode ver 24 + 11 = 35 e não 33. Você poderia ter alguma ideia de por que isso acontece?
Eugene,
Eu sei que este é um post antigo, mas acabei de encontrá-lo porque é o primeiro resultado no google. Percebi que a função css () é um pouco mais rápida que o width (), talvez eu esteja errado.
Dohab 01 de
1
Eu estava tentando definir uma largura usando, .width("20%")no entanto, o elemento continuava sendo definido como width: 24%. Depois de vasculhar os documentos, descobrimos que isso está relacionado à box-sizingpropriedade CSS . O uso .css({'width':"20%"})evitará esse ajuste.
khartnett
14

Hemnath

Se sua variável for a porcentagem:

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

Se sua variável for em pixels e você quiser a porcentagem que ocupa do pai:

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

Aqui está uma alternativa que funcionou para mim:

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