CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ewr Xcerq
Ewr Xcerq

Reputation: 192

Remove all attribute of a style

<div><a id="link" style="position:fixed !important;
    bottom:0px !important;
    right:0px !important;
    color:#000000 !important;font:10pt Arial !important">press me</a>
</div>

In order to change that div block into 

<div><a id="link" style="position:fixed !important;
    bottom:0px !important;
    left:100px !important;
    color:#000 !important;font:10pt Arial !important">press me</a>
</div>

(only the left property is different), I try this

  1. Remove all attributes of style ($'#link').RemoveAttr('style');
  2. I would like to add the attributes of style back but there seems to be none of such AddAttr exists.

Upvotes: 0

Views: 229

Answers (4)

Sushanth --
Sushanth --

Reputation: 55750

It is a bad practice to use Inline styles..Also you need to avoid using !important as well..

Use classes instead of inline styles..

That looks lot cleaner

HTML

<div>
    <a id="link" class="link right" >press me</a>
</div>​

CSS

.link
{
    position:fixed !important;
    bottom:0px !important;
    color:#000000 !important;
    font:10pt Arial !important;
}
.right
{
    right:0px !important;
}

.left
{
    left:100px !important;
}

Javascript

Then you can just use .addClass() and .removeClass() to get the things done..

$('#link').on('click', function() {
    $(this).removeClass('right').addClass('left');
});​

Check Fiddle

Upvotes: 1

Pete Uh
Pete Uh

Reputation: 630

the .css() method relates to inline styling as you have above rather than the .attr() method, so if the left property is all you wish to change, try:

$('#link').css({ 'right' :  'auto', 'left' : '100px' });

Upvotes: 1

threenplusone
threenplusone

Reputation: 2122

You can use .attr('style', '') to remove, and .attr('style', '...'); to set the style back.

But it might be better to set the css styles to two different classes and use .addClass() and .removeClass() instead.

Upvotes: 6

Shpat
Shpat

Reputation: 502

you could do it this way one by one: 

        $('#elementID').css('property','value');

or you could write some style properties on your css file like:

  .tobeadded{
   positon:relative;
   ...
    ...
  }

and then you could add this class to that element:

       $('#elementID').addClass('tobeadded');

Upvotes: 0

Related Questions