JavaScript 尝试检测 CSS 属性 "left" 时出现 NaN 错误？

Question

这个问题借鉴了我昨天问的一个问题。那个问题是：

但现在我在执行以下代码时遇到 NaN 错误：

var targetBoxLeft = parseFloat(document.getElementById("targetBox").style.left);
bulletOne.style.left = bulletOneLeft;

if (bulletOneLeft > targetBoxLeft){
document.getElementById("targetBox").style.opacity = "0";   
};

昨天我没有使用"parseFloat"，但是我的问题是，如果我将targetBoxLeft 的参数具体描述为CSS style.left 属性；为什么那不是一个具体的数字？为什么它不接受 left: 310px; 的数量？由元素属性本身指定？

#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}

从逻辑上讲，以下 2 行代码应该检测 ACTUAL 数字吗？；

var bulletOneLeft = bulletOne.style.left;
var targetBoxLeft = targetBox.style.left;

然后一旦上述变量被检测为实际数字，下面的 if 语句代码是否能够根据它们进行比较如果涉及运动(bulletOneLeft++;)，它们在任何给定时间的值？:

if (bulletOneLeft > targetBoxLeft){
document.getElementById("targetBox").style.opacity = "0";   
};

我不太确定发生了什么，但是因为当 targetBox.style.left 被代码读取时我得到一个 NaN 错误，我猜可能是 CSS 属性在我运行 if 语句与相应的 VAR's?[ 之前，需要将额外的代码转换为实际的 number/variable =19=]

Answer 1

您正在查询 .style.left 属性，这与计算样式不同。 .style 属性个元素引用 style 属性值。 parseFloat("")returnsNaN。使用 window.getComputedStyle()

var div = document.querySelector("div");
console.log(div.style.left, parseFloat(div.style.left));
console.log(parseFloat(window.getComputedStyle(div).getPropertyValue("left")));

div {
  position: relative;
  left:310px;
}

<div>div</div>

JavaScript 尝试检测 CSS 属性 "left" 时出现 NaN 错误？

JavaScript NaN error when trying to detect CSS property "left"?

html

javascript

css

if-statement

nan