尝试检测CSS属性“左”时出现JavaScript NaN错误？

这个问题捎带回我昨天问的一个问题。这个问题是：尝试检测CSS属性“左”时出现JavaScript NaN错误？

"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属性;为什么不是一个具体的数字？为什么它不会占用剩下的数量：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;

，然后一旦上述变量被检测为实际的数字，应该在以下如果语句代码能够根据它们的值来比较它们在任何给定时间，如果运动（bulletOneLeft ++;）参与？：

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

林不完全知道发生了什么，但由于我得到NaN的错误时targetBox.style.left是我猜的代码读取，也许一个CSS属性需要另外在我运行if声明与相应的VAR的之前，将代码转换为实际数字/变量？

来源

2017-04-09 Ghoyos

也许脚本首先加载的CSS之前不知道或试图访问任何其他财产 –

如果我把“PX”出它仍然把它作为一个“串” - ”不是个310一个数字？不要试图讽刺，我真正的意思不是css style.left 310的属性是一个实际的数字吗？ – Ghoyos

您正在查询.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>

来源

2017-04-09 18:13:45 guest271314

嗯gna实施，生病让你知道，如果它在5分钟内工作 – Ghoyos

我认为这是正确的答案，但即时通讯难以实施它。如果我破解它，我会继续尝试并发表评论。 – Ghoyos

_“但我很难实现它”_你具体是什么意思？你可以创建一个jsfiddle http://jsfiddle.net或plnkr http://plnkr.co来演示吗？ – guest271314

尝试检测CSS属性“左”时出现JavaScript NaN错误？

回答

相关问题