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

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

Có lẽ tôi đang làm gì đó sai, nhưng nếu yếu tố của tôi thể hiện chính nó 780 pixels widevà Fireorms nói với tôi rằng có 10px paddingtrên đó, nhưng việc gọi .width()chỉ mang lại cho 760, tôi rất khó để xem làm thế nào.

Cảm ơn cho bất kỳ đề nghị.

[Cập nhật]

Câu trả lời ban đầu được viết trước jQuery 1.3 và các hàm 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 JP 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 bordervà paddingtheo mặc định, và cũng là marginnếu đối số đầu tiên của hàm làtrue

[Câu trả lời gốc]

Các widthphương pháp không còn đòi hỏi các dimensionsplugin, bởi vì nó đã được thêm vàojQuery Core

Những gì bạn cần làm là lấy các giá trị đệm, lề và độ rộng đường viền của div cụ thể đó và thêm chúng vào kết quả của widthphương thức

Một cái gì đó 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 để dễ đọc hơn

Bằng cách đó, bạn sẽ luôn nhận được giá trị được tính toán chính xác, ngay cả khi bạn thay đổi giá trị đệm hoặc giá trị lề từ css

Bất cứ ai khác vấp phải câu trả lời này nên lưu ý rằng jQuery bây giờ (> = 1.3) có outerHeight/ outerWidthhàm để lấy chiều rộng bao gồm cả đệm / viền, ví dụ:

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

Để bao gồm cả lề, chỉ cần vượt qua true:

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

có vẻ như outsWidth bị hỏng trong phiên bản mới nhất của jquery.

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

div bên ngoài được thả nổi, div bên trong có tập chiều rộng (nhỏ hơn div bên ngoài) div bên trong có style = "margin: auto"

Để đơn giản, tôi đã gói gọn câu trả lời tuyệt vời của Andreas Grech ở trên trong một số chức năng. Đối với những người muốn 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;
}

cùng một trình duyệt có thể trả về chuỗi cho độ rộng đường viền, trong parseInt này sẽ trả về NaN, vì vậy hãy đảm bảo bạn phân tích giá trị thành int đú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"));

$(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>