วิธีสร้าง jQuery เป็นค่า not round ที่ส่งคืนโดย .width ()?

ฉันค้นหารอบ ๆ แล้วไม่พบสิ่งนี้ ฉันกำลังพยายามหาความกว้างของ div แต่ถ้ามีจุดทศนิยมมันจะปัดเศษตัวเลข

ตัวอย่าง:

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

ถ้าฉันทำ$('#container').width();มันจะส่งกลับ 543 แทนที่จะเป็น 543.5 ฉันจะไม่ปัดเศษตัวเลขและส่งคืนเต็ม 543.5 ได้อย่างไร

ใช้เนทีฟElement.getBoundingClientRectแทนรูปแบบขององค์ประกอบ ได้รับการแนะนำใน IE4 และได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมด:

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

หมายเหตุ: สำหรับ IE8 และต่ำกว่าโปรดดูหมายเหตุ "ความเข้ากันได้ของเบราว์เซอร์"ในเอกสาร 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>

คำตอบของ Ross Allenเป็นจุดเริ่มต้นที่ดี แต่การใช้getBoundingClientRect () ความกว้างจะรวมถึงช่องว่างภายในและความกว้างของเส้นขอบซึ่งไม่ใช่กรณีของฟังก์ชันความกว้างของ jquery :

วัตถุ TextRectangle ที่ส่งคืนมีช่องว่างภายในแถบเลื่อนและเส้นขอบ แต่ไม่รวมระยะขอบ ใน Internet Explorer พิกัดของสี่เหลี่ยมผืนผ้าล้อมรอบจะรวมขอบด้านบนและด้านซ้ายของพื้นที่ไคลเอ็นต์

หากเจตนาของคุณต้องการให้ได้widthค่าด้วยความแม่นยำคุณจะต้องลบช่องว่างภายในและเส้นขอบดังนี้:

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

แค่อยากจะเพิ่มประสบการณ์ของฉันที่นี่แม้ว่าคำถามจะเก่า: ฉันทามติข้างต้นดูเหมือนว่าการปัดเศษของ jQuery นั้นมีประสิทธิภาพดีพอ ๆ กับการคำนวณที่ไม่มีเหตุผล - แต่ดูเหมือนจะไม่เป็นเช่นนั้นในสิ่งที่ฉันทำ .

องค์ประกอบของฉันมีความกว้างของของเหลวโดยทั่วไป แต่เนื้อหาที่เปลี่ยนแปลงแบบไดนามิกผ่าน AJAX ก่อนที่จะเปลี่ยนเนื้อหาฉันล็อกขนาดขององค์ประกอบไว้ชั่วคราวเพื่อไม่ให้เลย์เอาต์ของฉันเด้งไปมาระหว่างการเปลี่ยนแปลง ฉันพบว่าการใช้ jQuery เช่นนี้:

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

ทำให้เกิดความสนุกสนานเช่นมีความแตกต่างของพิกเซลย่อยระหว่างความกว้างจริงและความกว้างที่คำนวณได้ (โดยเฉพาะฉันจะเห็นคำกระโดดจากบรรทัดหนึ่งไปยังอีกบรรทัดหนึ่งซึ่งแสดงว่ามีการเปลี่ยนแปลงความกว้างไม่ใช่แค่ล็อก) จากคำถามอื่น - การรับความกว้างของจุดลอยตัวที่แท้จริงขององค์ประกอบ - ฉันพบ ซึ่งwindow.getComputedStyle(element).widthจะส่งคืนการคำนวณที่ไม่มีเหตุผล ดังนั้นฉันจึงเปลี่ยนรหัสด้านบนเป็นบางอย่างเช่น

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

และด้วยรหัสนั้น - ไม่มีการตีกลับที่ตลก! ประสบการณ์นั้นดูเหมือนจะชี้ให้เห็นว่าค่าที่ไม่เกี่ยวข้องมีความสำคัญกับเบราว์เซอร์จริงไหม? (ในกรณีของฉันคือ Chrome เวอร์ชัน 26.0.1410.65)

คุณสามารถใช้getComputedStyleมัน:

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

ใช้สิ่งต่อไปนี้เพื่อรับความกว้างที่ถูกต้อง:

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