为什么 element.style.left 返回 NaN？答案

【问题标题】：Why is element.style.left returning NaN?为什么 element.style.left 返回 NaN？
【发布时间】：2010-11-28 12:49:35
【问题描述】：

我在 Internet Explorer 7 中遇到一个奇怪的错误，当我在浮点数上调用 Math.round 时，它会给我一个“无效参数”错误。考虑以下几点：

var elementLeft = parseInt(element.style.left); // Here we're actually getting NaN
function Foo(x) {
  this.x = x;

  this.apply = function(element) {
    element.style.left = Math.round(this.x) + 'px';
  };
}
Foo(elementLeft);

在这种情况下，x 是一个非负数，element 只是我页面中的一个 DOM 元素（实际上是一个 div）。

有什么想法吗？

编辑： 作为x 参数传入的变量实际上早先初始化为parseInt(element.style.left)。看来我第一次尝试阅读element.style.left 时，IE 实际上是在回馈 NaN。我已经更新了代码以反映这一点。有人知道任何解决方法吗？

【问题讨论】：

您是否尝试将 alert(this.x) 放入匿名函数中？ ;)
如果它真的是一个浮点数，那应该可以。也展示你如何使用这个对象。

标签： javascript internet-explorer dom internet-explorer-7

【解决方案1】：

我不认为是 Math.round() 给了你错误。它可能是 CSS 子系统。尝试使用alert() 获取您获得的价值。

【讨论】：

【解决方案2】：

IE 是否默认 x 为错误值？

在this page 上向下滚动到第 10 项：

一切正常火狐，谷歌浏览器等。但我是 IE 有问题（所有口味）。没有选择工具提出了一个 javascript 警告生产告诉我一个 '无效的论点'被提交给 Math.round 函数。

原因是当你第一次点击图片开始你的选择，scaleX 和 scaleY javascript中的变量页面结果为 Infinity。 Firefox 和其他所有浏览器似乎默默地跨过这个并携带正常处理。当然是 IE 没有。

解决方案是添加以下内容初始 scaleX 之后的行和计算 scaleY 变量。这似乎已经解决了问题完全。 if(scaleX == 无穷大 || scaleY == 无穷大) 返回假；我希望这可以帮助其他人并为他们节省打猎花了我一个小时；o)

【讨论】：

我认为你是对的。 x 实际上传递了一个先前使用 element.style.left 加载的值。看来我第一次尝试读取 element.style.left IE 会返回 NaN。

【解决方案3】：

看来我第一次尝试读取 element.style.left 时，IE 实际上正在返回 NaN。

第一次阅读element.style.left，元素上是否真的设置了left 样式？请记住，element.style 仅反映内联 style="..." 属性中设置的样式属性，而不反映样式表应用的样式属性。

如果你没有设置内联样式，style.left 会给你undefined 对象，这确实是parseInt 到 NaN。

【讨论】：

我们赢了！我很好奇，样式表会应用什么左侧？
element.currentStyle 在 IE 中； document.getComputedStyle 在标准浏览器中。不过，解析样式通常是个坏消息，您并不总是知道要获得什么单位，而且转换也并非易事。对于专门以像素为单位测量定位，offsetLeft/Top/Width/Height/Parent 属性往往更容易使用。

【解决方案4】：

一些框架，例如 jQuery，可以读取元素的计算的 位置——而不需要你显式地设置它们的 CSS 位置属性。尝试通过 jQuery 读取元素的位置。它可能会起作用。

【讨论】：

【解决方案5】：

由于某些原因，Javascript 仅适用于内联样式。例如

<div style="left:500px;"></div>

如果您希望处理元素的位置，请尝试在 Java Script 文件中设置初始位置，例如：

function Xyz() {
    var elem = document.getElementById('id');
    elem.style.left = 500px;
    numberLeft = 500;
    //Now you can manipulate the position
    var increment= 50;
    var newLeft = numberLeft + increment;
    elem.style.left = newLeft + 'px';
}

你明白了。把你的逻辑放进去。

【讨论】：