132

I've inherited a project I'm working on and I'm updating some jquery animations (very little practice with jquery).

I have a div I need to add and remove the style attribute from. Here is the div:

<div id='voltaic_holder'>

At one point in the animation I need to add a style to it:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

I've searched around and found the .removeAttr() method but I can't see how to add it, or even remote parts of it (like the top:-75px only).

Thanks,

Thaddeus Albers
  • 4,094
  • 5
  • 32
  • 42
ItsPronounced
  • 5,475
  • 13
  • 47
  • 86
  • `$('voltaic_holder').style = null` perhaps? Styles have their own entire object tree. most other attributes are just key=value type data. – Marc B Mar 22 '11 at 17:00

7 Answers7

302

You could do any of the following

Set each style property individually:

$("#voltaic_holder").css("position", "relative");

Set multiple style properties at once:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Remove a specific style:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Remove the entire style attribute:

$("#voltaic_holder").removeAttr("style")
Adam Albrecht
  • 6,680
  • 4
  • 31
  • 35
  • Can I add more than 1 css property per line? Or do I have to do one for each style property like so: `$("#voltaic_holder").css("position", "relative");` `$("#voltaic_holder").css("top", "-75");` – ItsPronounced Mar 22 '11 at 17:09
  • 3
    To answer that, yes you can. Just use an object literal on the .css() function. Like $('foo').css({'height':'30px','width':'50px'}); – Richard Neil Ilagan Mar 22 '11 at 17:13
  • @AdamAlbrecht How can I remove specific style that I have added because in $("#voltaic_holder").removeAttr("style") it removes all applied style that was by default with newly added. – 3 rules Jul 13 '16 at 12:35
28

To completely remove the style attribute of the voltaic_holder span, do this:

$("#voltaic_holder").removeAttr("style");

To add an attribute, do this:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

To remove only the top style, do this:

$("#voltaic_holder").css("top", "");
Peter Olson
  • 139,199
  • 49
  • 202
  • 242
19

If you are using jQuery, use css to add CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

To remove CSS attributes

$("#voltaic_holder").css({'position': '',
    'top': ''});
justkt
  • 14,610
  • 8
  • 42
  • 62
  • You cannot remove the position or top attribute from the voltaic_holder element, because it does not have thos attributes. Those are css properties defined in the style attribute. – Peter Olson Mar 22 '11 at 17:02
  • @Peter - doh! Edited to use `.css` – justkt Mar 22 '11 at 17:04
12

The easy way to handle this (and best HTML solution to boot) is to set up classes that have the styles you want to use. Then it's a simple matter of using addClass() and removeClass(), or even toggleClass().

$('#voltaic_holder').addClass('shiny').removeClass('dull');

or even

$('#voltaic_holder').toggleClass('shiny dull');
Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61
6

In case of .css method in jQuery for !important rule will not apply.

In this case we should use .attr function.

For Example: If you want to add style as below:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

You should use:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Hope it helps some one.

Adiyya Tadikamalla
  • 893
  • 10
  • 8
3

Remove style attribute from div using J query:

$("#TableDiv").removeAttr("style");

Add style to div using J query:

$("#TableDiv").attr("style", "display: none;");

Add style using html:

<div class="row" id="TableDiv" style="display: none;">
</div>

Hope it will helpful :)

Wajid khan
  • 842
  • 9
  • 18
2

Anwer is here How to dynamically add a style for text-align using jQuery

Community
  • 1
  • 1
TheHorse
  • 2,787
  • 1
  • 23
  • 32