Установка ширины в процентах с помощью jQuery

87

Как я могу установить ширину div в процентах с помощью jQuery?

Прасад
источник

Ответы:

135

Используя функцию ширины :

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

получится:

<div id="somediv" />

в:

<div id="somediv" style="width: 70%;"/>
Дарин Димитров
источник
3
у меня ширина в переменной! Как я могу сделать это до% ширины ??
Hemnath Mouli
2
@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");
Зоргатоне
У меня есть элемент с шириной 24%, установка ширины, как вы предлагаете, на 11% дает мне ширину 33%. Я думал, что это добавляет ширину к существующей ширине, но, как вы видите, 24 + 11 = 35, а не 33. Не могли бы вы понять, почему это происходит?
Евгений
Я знаю, что это старый пост, но я только что наткнулся на него, так как это первый результат в Google. Я заметил, что функция css () немного быстрее, чем width (), может я ошибаюсь.
Дохаб
1
Я пытался установить ширину, .width("20%")но элемент продолжал устанавливаться width: 24%. Покопавшись в документации, выясняется, что это связано со box-sizingсвойством CSS . Использование .css({'width':"20%"})позволит избежать этой регулировки.
khartnett
14

Хемнат

Если ваша переменная - это процент:

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

Если ваша переменная находится в пикселях и вы хотите, чтобы она занимала процентное отношение к родительскому элементу:

var myWidth = 140;
var myPercentage = (myWidth / $('div#somediv').parent().width()) * 100;
$('div#somediv').width(myPercentage + '%');
Джонатан Элдер
источник
13

Вот альтернатива, которая сработала для меня:

$('div#somediv').css({'width': '70%'});
joaorodr84
источник