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

Question

这个问题源于我昨天问的一个问题。那个问题是:

"if" statement parameters not functioning as intended. JavaScript

但是现在我在执行以下代码时遇到了一个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;
}

从逻辑上讲，以下两行代码是否应该检测 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 属性需要额外的代码才能转换为实际数字/在运行具有相应 VAR 的 的if 语句之前变量？

Answer 1

您正在查询 .style.left 属性，这与计算样式不同。 .style 元素引用的属性 style 属性值。 parseFloat("") 返回 NaN。使用 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>