Bagaimana cara membuat jQuery menjadi nilai bulat yang dikembalikan oleh .width ()?

Saya telah mencari-cari dan tidak dapat menemukan ini. Saya mencoba untuk mendapatkan lebar div, tetapi jika memiliki koma desimal itu membulatkan angka.

Contoh:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

Jika saya melakukannya, $('#container').width();itu akan menghasilkan 543, bukan 543,5. Bagaimana cara mendapatkannya agar tidak membulatkan angka dan mengembalikan 543,5 penuh (atau angka berapapun itu).

Gunakan native Element.getBoundingClientRectdaripada gaya elemen. Itu diperkenalkan di IE4 dan didukung oleh semua browser:

$("#container")[0].getBoundingClientRect().width

Catatan: Untuk IE8 dan yang lebih lama, lihat catatan "Kompatibilitas Browser" di dokumen MDN.

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Jawaban Ross Allen adalah titik awal yang baik, tetapi menggunakan getBoundingClientRect (). Width juga akan menyertakan padding dan lebar batas yang bukan merupakan fungsi lebar jquery :

Objek TextRectangle yang dikembalikan menyertakan padding, scrollbar, dan perbatasan, tetapi tidak termasuk margin. Di Internet Explorer, koordinat persegi panjang pembatas mencakup batas atas dan kiri dari area klien.

Jika maksud Anda adalah mendapatkan widthnilai dengan presisi, Anda harus menghapus padding dan border seperti ini:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Hanya ingin menambahkan pengalaman saya di sini, meskipun pertanyaannya sudah lama: Konsensus di atas tampaknya adalah bahwa pembulatan jQuery secara efektif sama baiknya dengan perhitungan yang tidak dibulatkan - tetapi tampaknya itu tidak terjadi pada sesuatu yang telah saya lakukan .

Elemen saya memiliki lebar yang dapat berubah-ubah, secara umum, tetapi konten yang berubah secara dinamis melalui AJAX. Sebelum mengganti konten, saya mengunci sementara dimensi elemen sehingga tata letak saya tidak terpental selama transisi. Saya telah menemukan bahwa menggunakan jQuery seperti ini:

$element.width($element.width());

menyebabkan beberapa kelucuan, seperti ada perbedaan sub-piksel antara lebar sebenarnya dan lebar yang dihitung. (Secara khusus, saya akan melihat sebuah kata melompat dari satu baris teks ke baris lain, yang menunjukkan bahwa lebarnya telah diubah, tidak hanya dikunci.) Dari pertanyaan lain - Mendapatkan lebar floating-point aktual dari suatu elemen - Saya menemukan keluar yang window.getComputedStyle(element).widthakan mengembalikan kalkulasi tidak bulat. Jadi saya mengubah kode di atas menjadi seperti

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

Dan dengan kode ITU - tidak ada pantulan lucu! Pengalaman itu sepertinya menunjukkan bahwa nilai yang tidak di-ground benar - benar penting bagi browser, bukan? (Dalam kasus saya, Chrome Versi 26.0.1410.65.)

Anda dapat menggunakannya getComputedStyleuntuk itu:

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Gunakan berikut ini untuk mendapatkan lebar yang akurat:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;