Resetting style values to previous declaration using javascript

Question

Consider the following

<style type ='text/css'>
   .c1
   {
        opacity:0.3;
   }
</style>

and

<div class = 'c1' id = 'myDiv'></div>

and

<script>
   function cssFn()
   {
       document.getElementById('myDiv').style.opacity = 0.8;
   }
   cssFn();

</script>

Thus i changed the opacity of the element using javascript.. My question is this.Is it possible to make the style declaration done using javascript to be inactive and that declared in class to be active using javascript..I dont need

document.getElementById('myDiv').style.opacity = 0.3;

I just need a code which resets the style to that declared using stylesheet

Possible duplicate of stackoverflow.com/questions/3506050/… — T. Junghans
– T. Junghans, Commented Apr 20, 2012 at 17:57

rlemon · Accepted Answer · 2012-04-20 17:59:46Z

0

I don't know if this can easily be done. Changing the styles in javascript creates an inline style on the element... so <div style="opacity: 0.3; "> you can remove the attribute or you can !important all things (do not do the latter). However either solution is hacky.

or as has been suggested in the other question you can set the property to "". which would negate the rule and take the stylesheet rule.

answered Apr 20, 2012 at 17:59

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jinu Joseph Daniel Over a year ago

i tried the "" and null method ..Both of them is not working

Christian Engel Over a year ago

element.setAttribute('style', '');

Jinu Joseph Daniel Over a year ago

but that will also remove the previous style declaration... right?

rlemon Over a year ago

the more and more i look into how to negate inline styles and force the external css declarations the more and more I see without physically removing the inline style there is no way.

André Silva · Accepted Answer · 2012-04-20 18:28:00Z

0

You can try to use 2 different classes.

<style type="text/css">
  .c1 {
   opacity: 0.3;
  }
  .c2 {
   opacity: 0.8;
  }
</style>

You can do with javascript :

 document.getElementByID("myDiv").className = "c1";

Or with jQuery :

$("#myDiv").addClass("c1");

answered Apr 20, 2012 at 18:28

André Silva

1,1699 silver badges30 bronze badges

1 Comment

Jinu Joseph Daniel Over a year ago

no ...that's not what i need...I just need to make the decalaration using javascript inactive and other declarations including inline,id(ex:#myDivin style),tag(ex:<div> in style) to be active instead of the previous declaration using javascript... The actual problem is this: i've created a fadeIn function which does a fade In effect using css3...After the effect shown i need to change the opacity back to the original one....

ampedtwiz · Accepted Answer · 2012-04-20 20:24:13Z

0

Put the style that you want to dynamically add or remove via Javascript in a separate class, then use Javascript or jQuery to add / remove that class when you need it.

So, along the same lines as what Andredseixas started with:

<style type ='text/css'>
   .c1
   {
     opacity:0.3;
   }
   .c2
   {
     opacity:0.3;
   }
</style>

In your function cssFn, using jQuery - do this instead of manually changing the opacity via the attribute:

$("myDiv").addClass("c2");

Then, using jQuery when you are done with your fadeIn logic:

$("#myDiv").removeClass("c2");

answered Apr 20, 2012 at 20:24

ampedtwiz

12 bronze badges

Collectives™ on Stack Overflow

Resetting style values to previous declaration using javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related