javascript - "if"语句参数未按预期运行。 JavaScript

Question

下面的 JavaScript “if” 语句没有读取参数，因为我打算读取两个参数。当我使用使用间隔运行 bulletOneLeft++; 的函数拍摄 bulletOne 时，bulletOne 的左侧 CSS 属性按预期在每个间隔增加 1 .但是，当我编写以下 if 语句来检测 bulletOne 的 CSS style.left 属性并将其与名为“<”的元素的 CSS style.left 属性进行比较时strong>目标框";代码无法识别这两个元素的 CSS style.left 属性的区别。我的问题是，一旦 bulletOne 的 CSS style.left 属性在数值上大于 targetBox 的 CSS style.left 属性，我如何才能使这个 if 语句执行？

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

bulletOneLeft和targetLeftProp的两个参数用下面的代码说明；

bulletOneLeft;

#bulletOne {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
}
bulletOne.style.left = bulletOneLeft;

targetLeftProp;

#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}
var targetLeftProp = window.getComputedStyle(CSSelement, 
null).getPropertyValue("left");

之前的失败尝试； 我尝试了很多不同的代码组合，以下是我第一次失败的尝试。以下代码在当时看来是最符合逻辑的；

var bulletLeft = document.getElementById("bulletOne").style.left;
var targetLeft = document.getElementById("targetBox").style.left;

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

Answer 1

所以首先你打错了，这就是为什么它在你失败的尝试中不起作用。

您的变量名为 bulletOne 但您使用 bulletOneLeft 执行 if 语句。

还有:

style.left;

返回一个字符串，所以你必须使用 parseFloat 函数或 parseInt 如果你确定它总是一个 int ( https://www.w3schools.com/jsref/jsref_parsefloat.asp , https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt ) 如下:

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

我相信你很高兴。