尝试检测 CSS 属性“左”时出现 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;
}

从逻辑上讲，以下 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 属性需要额外的代码才能转换为实际数字/在我使用相应的 VAR's 运行 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>