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);

    }
}

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个参数表示将字符串解释为基数为10的数字。有关详细信息，请参阅文档：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt）

div位置+运算符不能按预期工作

1 个答案: