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 не определено. Я пытался выяснить это некоторое время, возможно, у меня что-то не так в моем синтаксисе, возможно? Любая помощь будет оценена, спасибо большое! Спасибо Ник Крейвер.

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(...)