ความกว้างรวมขององค์ประกอบ (รวมถึงการขยายและขอบ) ใน jQuery

ในเรื่องนั้นเราจะได้ความกว้างทั้งหมดขององค์ประกอบรวมถึงเส้นขอบและช่องว่างภายในโดยใช้ jQuery ได้อย่างไร ฉันมีขนาด jQuery ปลั๊กอินและการทำงาน.width()ของฉัน760px-wide, ผลตอบแทน10px padding DIV760

บางทีฉันอาจจะทำสิ่งผิดปกติ แต่ถ้าองค์ประกอบของฉันปรากฏตัวในขณะที่780 pixels wideและ Firebug บอกฉันว่ามี10px paddingอยู่ในนั้น แต่โทร.width()เพียงให้ 760 ฉันจะกดยากที่จะดูว่า

ขอบคุณสำหรับคำแนะนำใด ๆ

[Update]

คำตอบดั้งเดิมเขียนขึ้นก่อน jQuery 1.3 และฟังก์ชั่นที่มีอยู่ ณ เวลาที่ตัวเองไม่เพียงพอในการคำนวณความกว้างทั้งหมด

ตอนนี้ในขณะที่JPถูกต้อง jQuery มีฟังก์ชั่นouterWidthและouterHeightซึ่งรวมถึงborderและpaddingโดยค่าเริ่มต้นและmarginถ้าอาร์กิวเมนต์แรกของฟังก์ชั่นคือtrue

[คำตอบเดิม]

widthวิธีการไม่ต้องใช้dimensionsปลั๊กอินเพราะมันได้รับการเพิ่มjQuery Core

สิ่งที่คุณต้องทำคือรับค่า padding, margin และ border width ของ div นั้น ๆ และเพิ่มเข้าไปในผลลัพธ์ของwidthเมธอด

บางสิ่งเช่นนี้

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

แบ่งออกเป็นหลายบรรทัดเพื่อให้อ่านง่ายขึ้น

ด้วยวิธีนี้คุณจะได้รับค่าคำนวณที่ถูกต้องเสมอแม้ว่าคุณจะเปลี่ยนค่าการเติมเต็มหรือระยะขอบจาก css

ใครก็ตามที่สะดุดกับคำตอบนี้ควรทราบว่าตอนนี้ jQuery (> = 1.3) มีouterHeight/ outerWidthฟังก์ชั่นเพื่อดึงความกว้างรวมถึงช่องว่างภายใน / ขอบเช่น

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

หากต้องการรวมส่วนต่างเพียงแค่ผ่านtrue:

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

ดูเหมือน outerWidth จะแตกใน jQuery เวอร์ชันล่าสุด

ความคลาดเคลื่อนเกิดขึ้นเมื่อ

div ด้านนอกลอยอยู่ div ด้านในมีชุดความกว้าง (เล็กกว่า div ด้านนอก) div ด้านในมี style = "margin: auto"

เพื่อความเรียบง่ายฉันได้คำตอบที่ยอดเยี่ยมของ Andreas Grech ในฟังก์ชั่นบางอย่าง สำหรับผู้ที่ต้องการความสุขตัดและวาง

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;
}

เบราว์เซอร์เดียวกันอาจส่งคืนสตริงสำหรับความกว้างชายแดนใน parseInt นี้จะส่งคืน NaN ดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณวิเคราะห์ค่าเป็น int อย่างถูกต้อง

        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>