div定位和运算符不像预期的那样工作。

Question

这是为什么会生效的原因：

newDiv.style.top = topBar.style.height.split("px")[0]+"px";
->>><div style="top: 30.31px;" class="lineSeparator"></div>

这个也可以正常工作

newDiv.style.top = topBar.style.height.split("px")[0]-2+"px";
->>><div style="top: 28.31px;" class="lineSeparator"></div>

而这也可行

newDiv.style.top = topBar.style.height.split("px")[0]/2+"px";
->>><div style="top: 15.15px;" class="lineSeparator"></div>

但这样是不起作用的：

newDiv.style.top = topBar.style.height.split("px")[0]+2+"px";
->>><div style="top: 30.31px;" class="lineSeparator"></div>

我也尝试过：

newDiv.style.top = (topBar.style.height.split("px")[0]+2)+"px";

这是我的完整代码：

function generateSeparators(n){
    for(var i=0;i<n;i++){
        var newDiv=document.createElement("div");
        newDiv.style.top = topBar.style.height.split("px")[0]+"px";
        newDiv.className = "lineSeparator";
        sideBar.appendChild(newDiv);

    }
}

- Vlad Otrocol

---

“不起作用”是什么意思，这适用于哪个HTML文件？ - j08691

如果您描述“不起作用”的版本发生了什么，那么其他人帮助您的难度就会降低很多。 - JJJ

Answer 1

在Javascript中，+ 运算符与 / 和 - 不同，它还可以执行字符串连接。您必须首先将第一个字符串操作数强制转换为数字。否则，“字符串”部分将占优势而“数字”部分将被忽略。例如：

"3" + 2 --> "32"

这是修复代码的一种方法：

newDiv.style.top = ((+topBar.style.height.split("px")[0])+2)+"px";

这可能是一种更好、更清晰的方法：

newDiv.style.top = (parseInt(topBar.style.height.split("px")[0], 10) + 2) + "px";

（parseInt中的第10个参数表示将字符串解释为十进制数。有关更多信息，请参见文档：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt）

- jonvuri

---

非常感谢！我真的不知道如何更好地描述这个问题，但你在几秒钟内就找到了问题所在。非常感谢。我将在7分钟内接受答案。爱你哟！ - Vlad Otrocol