Як змусити jQuery не округляти значення, яке повертається .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>

Просто хотів додати тут свій досвід, хоча питання старе: консенсус вище, схоже, полягає в тому, що округлення 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.)

Відповідь Росса Аллена є хорошою відправною точкою, але використання 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());

Ви можете використовувати getComputedStyleдля нього:

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

Використовуйте наступне, щоб отримати точну ширину:

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