Total lebar elemen (termasuk padding dan border) di jQuery


164

Seperti dalam subjek, bagaimana seseorang bisa mendapatkan lebar total elemen, termasuk perbatasan dan bantalannya, menggunakan jQuery? Saya punya plugin dimensi jQuery, dan berjalan .width()pada saya 760px-wide, 10px paddingpengembalian DIV 760.

Mungkin saya melakukan sesuatu yang salah, tetapi jika elemen saya memanifestasikan dirinya sebagai 780 pixels widedan Firebug mengatakan kepada saya bahwa ada 10px paddingdi dalamnya, tetapi menelepon .width()hanya memberi 760, saya akan kesulitan untuk melihat bagaimana.

Terima kasih atas sarannya.

Jawaban:


216

[Memperbarui]

Jawaban aslinya ditulis sebelum jQuery 1.3, dan fungsi-fungsi yang ada pada saat itu tidak cukup untuk menghitung lebar keseluruhan.

Sekarang, seperti yang dinyatakan JP dengan benar, jQuery memiliki fungsi outerWidth dan outerHeight yang mencakup borderdan paddingsecara default, dan juga marginjika argumen pertama dari fungsi tersebut adalahtrue


[Jawaban asli]

The widthMetode tidak lagi membutuhkandimensions Plugin, karena telah ditambahkan kejQuery Core

Yang perlu Anda lakukan adalah mendapatkan nilai padding, margin, dan border edge dari div tersebut dan menambahkannya ke hasil width metode

Sesuatu seperti ini:

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

Pisahkan menjadi beberapa baris agar lebih mudah dibaca

Dengan begitu Anda akan selalu mendapatkan nilai perhitungan yang benar, bahkan jika Anda mengubah nilai padding atau margin dari css


3
Secara umum, saya lebih suka percaya jQuery daripada melakukan perhitungan sendiri. Masalahnya adalah bahwa fungsi width () sebenarnya tidak menentukan apa yang dilakukannya jika "kotak-ukuran: kotak-batas". Saya baru saja mengujinya, dan mengembalikan lebar bagian dalam tidak termasuk padding, dll. orang yang berbeda mungkin mengharapkan hal yang berbeda. Jadi contoh kode di atas benar-benar berfungsi, tetapi itu mungkin bukan cara yang paling dapat diandalkan. Seperti ditunjukkan dalam beberapa jawaban lain, saya akan merekomendasikan menggunakan fungsi outerWidth () sebagai gantinya. Setidaknya menjanjikan apa yang seharusnya dalam dokumentasi.
Jan Zich

4
Fungsi outerWidth / outerHeight tidak ada ketika saya menulis jawaban ini.
Andreas Grech

Hanya komentar singkat tentang kode lama saya, jika ada yang masih menggunakannya; yang parseIntbisa diubah ke +operator untuk membuat kode lebih ringkas. Jadi, parseInt(theDiv.css("padding-left"), 10)bisa dihidupkan +theDiv.css("padding-left")dll ...
Andreas Grech

182

Siapa pun yang menemukan jawaban ini harus mencatat bahwa jQuery sekarang (> = 1.3) memiliki outerHeight/ outerWidthfungsi untuk mengambil lebar termasuk padding / batas, misalnya

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

Untuk memasukkan margin juga, cukup kirimkan true:

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

3
Saya tidak memiliki kemampuan edit, tetapi saya akan mengubah komentar pertama menjadi: // Mengembalikan lebar + padding + batas Dan mengubah komentar kedua ke // Mengembalikan lebar + padding + perbatasan + margin
CtrlDot

2

Sepertinya outerWidth rusak di jquery versi terbaru.

Perbedaan terjadi ketika

div luar melayang, div dalam memiliki set lebar (lebih kecil dari div luar) div dalam memiliki style = "margin: auto"


2

Demi kesederhanaan, saya merangkum jawaban hebat Andreas Grech di atas dalam beberapa fungsi. Bagi mereka yang menginginkan sedikit kebahagiaan cut-and-paste.

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

0

browser yang sama dapat mengembalikan string untuk lebar perbatasan, di parseInt ini akan mengembalikan NaN jadi pastikan Anda mengurai nilai ke int dengan benar.

        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"));

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

Terima kasih telah mengirim jawaban Anda! Pastikan untuk membaca FAQ tentang Promosi Diri dengan cermat. Juga mencatat bahwa itu diperlukan bahwa Anda memasukkan disclaimer setiap kali Anda link ke situs Anda sendiri / produk.
Andrew Barber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.