Question

I’m using the jquery .css property to add a background

myobj.css('background', '#AE0000');

This results in this style html being added to the markup

style="background: none repeat scroll 0% 0% rgb(174, 0, 0);"

Later on, I want to remove this background. I thought that setting css background to white myobj.css('background', '#FFFFFF'); would work, but unfortunately, this creates problems because the div has white background as opposed to nothing.

style="background: none repeat scroll 0% 0% rgb(255, 255, 255);"

Is there a similar way with jquery to entirely remove the background property of the CSS? like style=""

Answer 1

Short Answer

myobj.css('backgroundColor', 'transparent');

Long Answer

I’d suggest for better maintainability, use css classes for things like this:

.active { background:#AE00000 }

then in your javascript

myobj.addClass('active');

to toggle off

myobj.removeClass('active');

This has the benefit of you not having to worry about changing the css value (if you use css()) everytime there’s change in your design or if you need to add more markup to that particular element.

For example, in the end you need to use background, font-size and color, in your js:

myobj.css({'background':'#aaa', 'font-size':'15px', 'color':'red'});

Then everytime you need to toggle off:

myobj.css({'background':'none', 'font-size':defaultSize + 'px', 'color':'black'});

Not only it’s error prone, but more difficult to maintain, if you use css:

.active { background:#AE00000; font-size:15px; color:red }

then in your javascript

myobj.addClass('active');

to toggle off

myobj.removeClass('active');