Получение фактической ширины элемента с плавающей запятой

Я использую jQuery (v1.7.1), и мне нужно получить абсолютную ширину элемента с плавающей запятой, но все методы ширины jQuery, похоже, округляют значение ширины.

Например, если фактическая ширина элемента была 20.333333px, метод width jQuery возвращает 20, то есть игнорирует десятичное значение.

Вы можете видеть, что я имею в виду под этим jsFiddle

Итак, мой вопрос: как получить значение с плавающей запятой ширины элемента?

Ответ 1

Если у вас уже есть ссылка на элемент DOM, element.getBoundingClientRect получит нужные вам значения.

Метод существует с Internet Explorer 4, поэтому он безопасен для использования везде. Однако атрибуты width и height существуют только в IE9+. Вы должны рассчитать их, если вы поддерживаете IE8 и ниже:

var rect = $("#a")[0].getBoundingClientRect();

var width;
if (rect.width) {
  // `width` is available for IE9+
  width = rect.width;
} else {
  // Calculate width for IE8 and below
  width = rect.right - rect.left;
}

getBoundingClientRect на 70% быстрее, чем window.getComputedStyle в Chrome 28, и различия в Firefox больше: http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

Ответ 2

Попробуйте следующее:

var element = document.getElementById("a");
alert(window.getComputedStyle(element).width);

Обновлен скрипт: http://jsfiddle.net/johnkoer/Z2MBj/18/