jQuery的追加元素，然后改變CSS？

Question

我正在嘗試創建一個div標簽，然后通過CSS對其進行更改，但是由於某種原因，它不起作用，這是我的代碼：

$('#draw').click(function(e){
  var divToAdd = "<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>";
  $("#area").append(divToAdd);
});
$('#left').click(function(e){
  //var leftNow = document.getElementById("box").left + 1;
  alert(document.getElementById("box").left);
  $("#box").css('left',leftNow);
});
$('#right').click(function(e){
  var leftNow = document.getElementById("box").left - 1;
  $("#box").css("left","90");
});

因此，由於某些原因，document.getElementById（“ box”）。left的值未定義。 我已經嘗試了好一陣子，也許我的語法可能有問題？ 任何幫助，將不勝感激，非常感謝！ 謝謝Nick Craver。

Answer 1

您將需要.style.left或$("#box").css('left'); 在這種情況下。

但是...有一種更簡單的方法，例如：

$("#box").css("left","-=1");

您可以通過這種方式使其相對，與+=相同，請保持簡單:)

Answer 2

這里有兩個建議：

（1）使用jQuery對象代替對象本身

var divToAdd = $("<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>");

實際上，上面的表達式也不太好，使其更像“ jQuery”：

var divToAdd = $('<div></div>').css('background-color','red').css....

（2）如果涉及到jQuery，請繼續使用

$('#box').css('left') instead of document.getElemengById(...)