Đặt chiều rộng dưới dạng phần trăm bằng cách sử dụng jQuery

Làm cách nào để đặt chiều rộng của một div dưới dạng phần trăm bằng cách sử dụng jQuery?

jquery width

— Prasad
nguồn

133

Sử dụng hàm width :

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

sẽ biến:

<div id="somediv" />

thành:

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

— Darin Dimitrov
nguồn

tôi có chiều rộng trong một biến! Làm thế nào tôi có thể làm cho nó thành% width ??

— hemnath Mouli

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

— Zorgatone

Tôi có một phần tử có chiều rộng là 24%, việc đặt chiều rộng như bạn đề xuất là 11% thì thay vào đó, tôi có chiều rộng là 33%. Tôi nghĩ rằng nó đang thêm chiều rộng vào chiều rộng hiện có nhưng như bạn có thể thấy 24 + 11 = 35 chứ không phải 33. Bạn có thể có bất kỳ ý tưởng tại sao điều này xảy ra không?

— Eugene

Tôi biết đây là một bài viết cũ, nhưng tôi chỉ chạy vào nó vì nó là kết quả đầu tiên trên google. Tôi nhận thấy rằng hàm css () nhanh hơn một chút mà width (), có lẽ tôi đã nhầm.

— Dohab

Tôi đã cố gắng thiết lập chiều rộng bằng cách sử dụng .width("20%")nhưng phần tử tiếp tục được đặt thành width: 24%. Sau khi tìm hiểu các tài liệu, hóa ra điều này có liên quan đến thuộc tính CSS box-sizing. Sử dụng .css({'width':"20%"})sẽ tránh được điều chỉnh này.

— khartnett

Hemnath

Nếu biến của bạn là phần trăm:

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

Nếu biến của bạn tính bằng pixel và bạn muốn tỷ lệ phần trăm mà biến đó chiếm từ biến cha mẹ:

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

— Jonathan Elder
nguồn

Đây là một giải pháp thay thế phù hợp với tôi:

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

— joaorodr84
nguồn