“ if”语句参数未按预期运行。 JavaScript的

Question

以下JavaScript “ if”语句未按我希望同时读取两个参数的方式读取参数。 当我使用带有使用间隔来运行bulletOneLeft ++的功能拍摄bulletOne时； bulletOne的左CSS属性按照预期的每个间隔增加1。 然而，当我编写if语句来检测bulletOne的CSS style.left财产，并将其与所谓的“targetBox”元素的CSS属性style.left以下; 代码无法识别这两个元素的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（ 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;

我相信，您走的很好。