Как заставить 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>

Ответ Росса Аллена - хорошая отправная точка, но использование getBoundingClientRect (). Width также будет включать отступы и ширину границы, что не относится к функции ширины 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());

вызывает некоторую забавность, например, есть субпиксельные различия между фактической шириной и расчетной шириной. (В частности, я увижу, как слово перескакивает с одной строки текста на другую, указывая на то, что ширина была изменена, а не просто заблокирована.) Из другого вопроса - Получение фактической ширины элемента с плавающей запятой - я обнаружил out, 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;