Как заставить jQuery не округлить значение, возвращаемое .width()?

Я искал вокруг и не мог найти это. Я пытаюсь получить ширину div, но если она имеет десятичную точку, она округляет число.

Пример:

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

Если я сделаю $('#container').width();, он вернет 543 вместо 543.5. Как мне заставить его не округлять число и возвращать полное 543,5 (или сколько бы оно ни было).

Ответ 1

Используйте собственный 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>

Ответ 2

Просто хотел добавить свой опыт здесь, хотя старый вопрос: консенсус выше, похоже, заключается в том, что округление 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.)

Ответ 3

Ответ Росса Аллена является хорошей отправной точкой, но используя getBoundingClientRect(). width также будет включать прописку и ширину границы, которая не соответствует функции jquery width:

Возвращенный объект 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());

Ответ 4

Вы можете использовать getComputedStyle для него:

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