change jquery masonry css with javascript

Question

I'm trying to dynamically change the css properties of a jquery masonry plugin box.

Essentially, I'm going to make the box expand, i've this code, but it yields no results.

$container.click(function(){
    var elem = document.getElementById($container);
    elem.style.width="500px";
});

I expect for the width of the block to change to 500px when I click on it, but it doesn't.

Any insight on dynamically changing css via javascript would be great. Thanks!

It doesn't look to me as if $container is a string, which it must be if that getElementById() call is going to work. Why are you using getElementById() anyway in jQuery code?
Well, I was trying to use some tutorials online. I started out with just $container.style.width, but that also didn't work.

Pointy · Accepted Answer · 2012-07-21 14:38:17Z

up vote 2 down vote accepted

All you need is:

$(this).css('width', '500px');

in the "click" handler. (That's assuming that the "container" is the box whose size you want to change.)

answered Jul 21 '12 at 14:38

Pointy
110k984152

feedback

Carl · Answer 2 · 2012-07-21 14:39:07Z

up vote 1 down vote

Change the handler internals to

   $container.css({width:"500px"});

answered Jul 21 '12 at 14:39

Carl
3,157733

feedback

2 Answers