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,
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", "");
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': ''});
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');
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.
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 :)
Source: Stackoverflow.com