JQuery'nin .width () tarafından döndürülen değeri yuvarlamaması nasıl sağlanır?

Etrafı araştırdım ve bulamadım. Bir div'in genişliğini elde etmeye çalışıyorum, ancak ondalık noktası varsa sayıyı yuvarlar.

Misal:

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

Ben yaparsanız $('#container').width();o 543 yerine 543.5 dönecektir. Sayıyı yuvarlamamayı ve tam 543.5'i (ya da herhangi bir sayı) döndürmemesini nasıl sağlayabilirim?

Element.getBoundingClientRectÖğenin stili yerine yerel olanı kullanın . IE4'te tanıtıldı ve tüm tarayıcılar tarafından destekleniyor:

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

Not: IE8 ve altı için MDN belgelerindeki "Tarayıcı Uyumluluğu" notlarına bakın.

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

Ross Allen'ın cevabı iyi bir başlangıç ​​noktasıdır, ancak getBoundingClientRect () kullanımı , jquery'nin genişlik işlevi olmayan dolgu ve kenarlık genişliğini de içerecektir :

Döndürülen TextRectangle nesnesi, dolguyu, kaydırma çubuğunu ve kenarlığı içerir, ancak kenar boşluğunu hariç tutar. Internet Explorer'da, sınırlayıcı dikdörtgenin koordinatları, istemci alanının üst ve sol kenarlıklarını içerir.

Amacınız widthdeğeri hassasiyetle elde etmekse, dolguyu ve kenarlığı şu şekilde kaldırmanız gerekir:

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

Sadece deneyimlerimi buraya eklemek istedim, soru eski olsa da: Yukarıdaki fikir birliği, jQuery'nin yuvarlamasının etkili bir şekilde yuvarlak olmayan bir hesaplama kadar iyi olduğu gibi görünüyor - ama yaptığım bir şeyde durum böyle görünmüyor .

Öğemin genel olarak akışkan bir genişliği var, ancak içeriği AJAX aracılığıyla dinamik olarak değişiyor. İçeriği değiştirmeden önce, öğenin boyutlarını geçici olarak kilitliyorum, böylece geçiş sırasında düzenim zıplamaz. Bunu jQuery kullanarak şu şekilde buldum:

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

gerçek genişlik ile hesaplanan genişlik arasında alt piksel farklılıkları olduğu gibi biraz komikliğe neden oluyor. (Özellikle, metnin bir satırından diğerine atlayan bir kelimenin, yalnızca kilitli değil, genişliğin değiştirildiğini belirten bir kelime göreceğim.) Başka bir sorudan - Bir öğenin gerçek, kayan nokta genişliğini elde etmek - buldum dikkat window.getComputedStyle(element).widthbir unrounded hesaplama dönecektir. Bu yüzden yukarıdaki kodu aşağıdaki gibi değiştirdim

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

Ve bu kodla - komik zıplama yok! Bu deneyim unrounded değeri aslında önermek görünüyor yapar sağ tarayıcıya olsun? (Benim durumumda, Chrome Sürümü 26.0.1410.65.)

Bunun için kullanabilirsiniz getComputedStyle:

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

Doğru bir genişlik elde etmek için aşağıdakileri kullanın:

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