JS语法打破了页面

Question

我在外部JS文件中有以下代码：

var myDiv = $(".myDiv");

if (myDiv.css('left') == 'auto') { 
    var pos = myDiv.position(); 
    myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" }); 
} 

以下行似乎打破了我的页面：

myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" }); 

如果我评论它一切正常，除了这个功能，显然。

如果我将这些值置于警报状态，我也可以正确使用它们。

alert(pos.left + ' ' + pos.top)

我错过了什么？

Answer 1

您正尝试通过传递2 object来创建strings。

应该是这样的：

myDiv.css({
  "left": pos.left + "px",
  "top": pos.top + "px"
});

Answer 2

简单修复，对css属性使用javascript对象表示法。将冒号移到引号之外：

myDiv.css({ "left": pos.left + "px", "top": pos.top + "px" });

Answer 3

您需要在传递给.css（）函数的对象中的值周围使用引号：

myDiv.css({ "left: '" + pos.left + "px'", "top: '" + pos.top + "px'" });