Làm thế nào để làm cho jQuery không làm tròn giá trị được trả về bởi .width ()?

Tôi đã tìm kiếm xung quanh và không thể tìm thấy điều này. Tôi đang cố gắng lấy chiều rộng của một div, nhưng nếu nó có dấu thập phân, nó sẽ làm tròn số.

Thí dụ:

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

Nếu tôi thực hiện $('#container').width();nó sẽ trả về 543 thay vì 543.5. Làm cách nào để tôi không làm tròn số và trả về toàn bộ 543,5 (hoặc bất kỳ số nào).

Sử dụng kiểu gốc Element.getBoundingClientRectthay vì kiểu của phần tử. Nó đã được giới thiệu trong IE4 và được hỗ trợ bởi tất cả các trình duyệt:

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

Lưu ý: Đối với IE8 trở xuống, hãy xem ghi chú "Tương thích trình duyệt" trong tài liệu 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>

Tôi chỉ muốn thêm kinh nghiệm của tôi ở đây, mặc dù câu hỏi đã cũ: Sự đồng thuận ở trên dường như là cách làm tròn của jQuery hiệu quả cũng tốt như một phép tính không có xung quanh - nhưng điều đó dường như không đúng trong trường hợp tôi đang làm .

Nói chung, phần tử của tôi có chiều rộng linh hoạt, nhưng nội dung thay đổi động thông qua AJAX. Trước khi chuyển đổi nội dung, tôi tạm thời khóa các kích thước của phần tử để bố cục của tôi không bị trả lại trong quá trình chuyển đổi. Tôi thấy rằng sử dụng jQuery như thế này:

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

đang gây ra một số điều thú vị, như có sự khác biệt về pixel phụ giữa chiều rộng thực tế và chiều rộng được tính toán. (Cụ thể, tôi sẽ thấy một từ nhảy từ dòng văn bản này sang dòng văn bản khác, cho biết chiều rộng đã được thay đổi, không chỉ bị khóa.) Từ một câu hỏi khác - Lấy chiều rộng thực tế, dấu phẩy động của một phần tử - Tôi tìm thấy ra điều đó window.getComputedStyle(element).widthsẽ trả về một phép tính không được bao quanh. Vì vậy, tôi đã thay đổi mã trên thành một cái gì đó như

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

Và với mã RẰNG - không bị trả lại buồn cười! Trải nghiệm đó dường như cho thấy rằng giá trị không được bao quanh thực sự quan trọng đối với trình duyệt, phải không? (Trong trường hợp của tôi, Phiên bản Chrome 26.0.1410.65.)

Câu trả lời của Ross Allen là một điểm khởi đầu tốt nhưng sử dụng getBoundsClientRect (). Width cũng sẽ bao gồm phần đệm và chiều rộng của đường viền mà không phải là trường hợp của hàm width của jquery :

Đối tượng TextRectangle được trả về bao gồm phần đệm, thanh cuộn và đường viền, nhưng không bao gồm lề. Trong Internet Explorer, tọa độ của hình chữ nhật bao gồm các đường viền trên cùng và bên trái của vùng máy khách.

Nếu mục đích của bạn là nhận được widthgiá trị với độ chính xác, bạn sẽ phải xóa phần đệm và đường viền như sau:

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

Bạn có thể sử dụng getComputedStylecho nó:

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

Sử dụng thông tin sau để có được chiều rộng chính xác:

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