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 http://stackoverflow.com/questions/3506050/how-to-reset-the-style-properties-to-their-css-defaults-in-javascript — T. Junghans, Apr 20 '12 at 17:57

score 0 · Answer 1 · answered Apr 20 '12 at 17:59

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 '12 at 17:59

rlemon

17,518
14
92
123

i tried the "" and null method ..Both of them is not working – Jinu Joseph Daniel Apr 20 '12 at 18:04
1

element.setAttribute('style', ''); – Christian Engel Apr 20 '12 at 19:15
but that will also remove the previous style declaration... right? – Jinu Joseph Daniel Apr 21 '12 at 05:24
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. – rlemon Apr 21 '12 at 18:48

score 0 · Answer 2 · answered Apr 20 '12 at 18:28

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 '12 at 18:28

André Silva

1,149
9
30

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:
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....
– Jinu Joseph Daniel Apr 20 '12 at 18:34

score 0 · Answer 3 · answered Apr 20 '12 at 20:24

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");

Resetting style values to previous declaration using javascript

3 Answers3