使用JavaScript

Question

我正在尝试使用marginLeft解析HTML元素的JavaScript属性值，但我不确定我做错了什么。

我已经使用了这两种方法（有或没有,10），但我的Current marginLeft: NaN获得了“console.log”：

var elementMargin = document.getElementById("main");
var style = elementMargin.currentStyle || window.getComputedStyle(elementMargin);

// tried this

var oldValue = parseInt(document.getElementById("main").style.marginLeft, 10);
console.log("Current marginLeft: " + oldValue);

// or this

var oldValue = parseInt(document.getElementById("main").style.marginLeft);
console.log("Current marginLeft: " + oldValue);

当我直接阅读和console.log属性值时，我不会收到错误：

var elementMargin = document.getElementById("main");
var style = elementMargin.currentStyle || window.getComputedStyle(elementMargin);

console.log("Current marginLeft: " + style.marginLeft); 

我得到输出“当前marginLeft：199px ”

这是基于这篇文章：Get a number for a style value WITHOUT the "px;" suffix

我做错了什么？

Answer 1

在第一个示例中，您将获得计算左边距，这将为您提供样式表级联后的余量。

在第二个和第三个示例中，您将获得style属性中指定的左边距。由于您收到NaN，因此可能未使用style属性进行设置，因此undefined也是如此。

将parseInt添加到您首先使用的代码中。

Answer 2

如果其他人有同样的问题，请澄清答案（感谢Quentin）：

var elementMargin = document.getElementById("main");
var style = elementMargin.currentStyle || window.getComputedStyle(elementMargin);

var oldValue = parseInt(style.marginLeft, 10);
console.log("Current marginLeft: " + oldValue);

输出：“当前marginLeft：199px ”