Tổng chiều rộng của phần tử (bao gồm cả phần đệm và đường viền) trong jQuery

Question

Như trong chủ đề, làm cách nào để có được tổng chiều rộng của một phần tử, bao gồm cả đường viền và phần đệm, sử dụng jQuery? Tôi đã có các plugin kích thước jQuery, và chạy .width() trên 760px rộng của tôi, 10px đệm DIV trả về 760.

Có lẽ tôi đang làm điều gì đó sai, nhưng nếu phần tử của tôi thể hiện chính nó là 780 pixel rộng và Firebug nói với tôi rằng có 10px đệm trên nó, nhưng gọi .width() chỉ cho 760, tôi sẽ khó ép để xem như thế nào.

Cảm ơn mọi đề xuất.

Answer 1

[Cập nhật]

Câu trả lời ban đầu được viết trước khi jQuery 1.3, và các chức năng đã tồn tại vào thời điểm đó không đủ tự để tính toán toàn bộ chiều rộng.

Bây giờ, khi J-P khẳng định một cách chính xác, jQuery có các chức năng outerWidth và outerHeight trong đó bao gồm các border và padding theo mặc định, và cũng là margin nếu đối số đầu tiên của hàm là true

---

[Original answer]

Phương thức width không còn yêu cầu dimensions plugin, b ecause nó đã được bổ sung vào jQuery Core

Những gì bạn cần làm là có được đệm, lề và biên độ rộng-giá trị đó div nói riêng và thêm chúng vào kết quả của width phương pháp

Something như thế này:

var theDiv = $("#theDiv"); 
var totalWidth = theDiv.width(); 
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width 
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width 
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width 

Chia thành nhiều dòng để làm cho nó dễ đọc hơn

Bằng cách đó bạn sẽ luôn luôn nhận được giá trị tính toán chính xác, ngay cả khi bạn ch ange padding hoặc margin giá trị từ css

Answer 2

Bất cứ ai khác ngại khi câu trả lời này nên lưu ý rằng jQuery bây giờ (> = 1.3) có outerHeight/outerWidth chức năng để lấy độ rộng bao gồm cả đệm/biên giới, ví dụ

$(elem).outerWidth(); // Returns the width + padding + borders 

Đưa lề là tốt, chỉ cần vượt qua true:

$(elem).outerWidth(true); // Returns the width + padding + borders + margins 

Answer 3

trông giống như outerWidth bị phá vỡ trong phiên bản mới nhất của jquery.

Sự khác biệt xảy ra khi

div ngoài được lưu hành, div bên trong có các thiết lập chiều rộng (nhỏ hơn so với div bên ngoài) div bên trong có style = "margin: auto"

Answer 4

cùng trình duyệt có thể trả về chuỗi cho chiều rộng đường viền, trong parseInt này sẽ trả lại NaN để đảm bảo bạn phân tích cú pháp giá trị thành đúng.

 var getInt = function (string) { 
      if (typeof string == "undefined" || string == "") 
       return 0; 
      var tempInt = parseInt(string); 

      if (!(tempInt <= 0 || tempInt > 0)) 
       return 0; 
      return tempInt; 
     } 

     var liWidth = $(this).width(); 
     liWidth += getInt($(this).css("padding-left")); 
     liWidth += getInt($(this).css("padding-right")); 
     liWidth += getInt($(this).css("border-left-width")); 
     liWidth += getInt($(this).css("border-right-width")); 

Answer 5

Để đơn giản, tôi đã đóng gói câu trả lời tuyệt vời của Andreas Grech ở trên một số chức năng. Đối với những người muốn có một chút hạnh phúc cắt và dán.

function getTotalWidthOfObject(object) { 

    if(object == null || object.length == 0) { 
     return 0; 
    } 

    var value  = object.width(); 
    value   += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width 
    value   += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width 
    value   += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width 
    return value; 
} 

function getTotalHeightOfObject(object) { 

    if(object == null || object.length == 0) { 
     return 0; 
    } 

    var value  = object.height(); 
    value   += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width 
    value   += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width 
    value   += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width 
    return value; 
} 

Answer 6

$(document).ready(function(){  
$("div.width").append($("div.width").width()+" px"); 
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px"); 
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");   
}); 


<div class="width">Width of this div container without including padding is: </div> 
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:  </div>