innerHTML与parseFloat结合使用

Question

我试图做的事情可以通过以下方式完成......

elementContent = document.getElementById('docElement').innerHTML;
elementContent = parseFloat(elementContent);

甚至是......

elementContent = parseFloat( document.getElementById('docElement').innerHTML );

但我不禁想知道是否有更优雅的方法来检索和分配DOM内容作为我可能不知道的浮动。有什么见解吗？

Answer 1

有unary plus operator尝试将字符串（或其他类型的toString()）转换为数字。它将被用作：

elementContent = +document.getElementById('docElement').innerHTML;

正如其他人所提到的，你也可以在这里使用jQuery作为.innerHTML的基本语法糖。

Answer 2

这是一个很好的做事方式。我唯一可以建议的是，如果你可以完全避免使用HTML标记，通过将“干净”数字存储为元素的属性，这将是更好的，因为它可以解决可能引入的问题，如果HTML比你期望的更加漂亮。 （例如，有时设计师想要使用Unicode“减号”字形而不是普通连字符格式化的负数，因为它看起来更好。）

因此，如果您可以生成这样的元素：

<span id='docElement' data-value='29.20221'>29.20221</span>

然后不要将值作为“.innerHTML”访问，而是使用“.getAttribute（）”：

var value = document.getElementById('docElement').getAttribute('data-value');
value = parseFloat(value);

Answer 3

使用JQuery：

var html = parseFloat($('#docElement').html());
$('#docElement').html(html);

Answer 4

如果你使用像jQuery这样的库，那么代码会更优雅，如下所示：

var el = parseFloat( $('#docElement').text() );

不要忘记您可能遇到需要trim()字符串的问题。