Jquery append element and then alter css?

Question

I'm attempting to create a div tag and then alter it via css, but for some reason its not working here's my code:

$('#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");
});

So for some reason the value of document.getElementById("box").left is undefined. I've been trying to figure this out for a while, i've probably got something wrong in my syntax perhaps? Any help would be appreciated, thanks alot! Thank you Nick Craver.

Nick Craver · Accepted Answer · 2010-06-30 02:26:37Z

5

You would need .style.left, or $("#box").css('left'); in this case.

But...there's an easier way, like this:

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

You can just make it relative this way, same for +=, keep it simple :)

answered Jun 30, 2010 at 2:26

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doug Molineux Over a year ago

Thank you sir, this is indeed the case, man i spent ages on this thanks a lot! Ill mark this correct asap.

Cheng Chen · Accepted Answer · 2010-06-30 02:27:57Z

2

Here I have two suggestions:

(1)Use jQuery object instead of object itself

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

Actually the expression above is not so good either, to make it more 'jQuery":

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

(2) Keep using jQuery if you involved it

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

answered Jun 30, 2010 at 2:27

Cheng Chen

43.7k18 gold badges118 silver badges184 bronze badges

Collectives™ on Stack Overflow

Jquery append element and then alter css?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related