Como fazer jQuery para não arredondar o valor retornado por .width ()?

Procurei e não consegui encontrar isso. Estou tentando obter a largura de um div, mas se tiver um ponto decimal, ele arredonda o número.

Exemplo:

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

Se eu fizer $('#container').width();isso, retornarei 543 em vez de 543,5. Como faço para não arredondar o número e retornar o 543,5 completo (ou qualquer número).

Use o nativo Element.getBoundingClientRectem vez do estilo do elemento. Foi introduzido no IE4 e é compatível com todos os navegadores:

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

Nota: Para IE8 e versões anteriores, consulte as notas de "Compatibilidade do navegador" nos documentos 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>

Só queria adicionar minha experiência aqui, embora a pergunta seja antiga: o consenso acima parece ser que o arredondamento do jQuery é efetivamente tão bom quanto um cálculo não arredondado - mas não parece ser o caso em algo que tenho feito .

Meu elemento tem uma largura fluida, geralmente, mas o conteúdo muda dinamicamente via AJAX. Antes de mudar o conteúdo, eu bloqueio temporariamente as dimensões do elemento para que meu layout não salte durante a transição. Descobri que usar jQuery assim:

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

está causando alguma graça, como a existência de diferenças subpixel entre a largura real e a largura calculada. (Especificamente, verei uma palavra saltar de uma linha de texto para outra, indicando que a largura foi alterada, não apenas bloqueada.) De outra pergunta - Obtendo a largura real de ponto flutuante de um elemento - descobri que window.getComputedStyle(element).widthretornará um cálculo não arredondado. Então mudei o código acima para algo como

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

E com ESSE código - sem pulos engraçados! Essa experiência parece sugerir que o valor não arredondado realmente importa para o navegador, certo? (No meu caso, Chrome versão 26.0.1410.65.)

A resposta de Ross Allen é um bom ponto de partida, mas usando getBoundingClientRect (). Width também incluirá o preenchimento e a largura da borda, o que não é o caso da função de largura do jquery :

O objeto TextRectangle retornado inclui o preenchimento, a barra de rolagem e a borda, mas exclui a margem. No Internet Explorer, as coordenadas do retângulo delimitador incluem as bordas superior e esquerda da área do cliente.

Se sua intenção é obter o widthvalor com precisão, você terá que remover o preenchimento e a borda como este:

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

Você pode usar getComputedStylepara isso:

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

Use o seguinte para obter uma largura precisa:

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