Grabbing original css properties inscript

[612wharfavenue]

A strange quirk ive noticed when altering css properties in script is that for the element being altered the new value is saved, basically negating the use of css altogether for that property. For instance i have opacity set 1 and i want to transition it to 0:<style>#image {opacity:1;-moz-transition: opacity 2s ease 0s; //initial value}</style><script>document.getelementbyid("image").style.opacity="0"; //transition to this value</script>Now its new value will be 0, and if i want to change it again back to one i have to specify it in script, making the css property useless. What id like to know is if there is anyway to tell JS to grab the value in a css property so that if i have a series of scripts calling for changes to and from the original value, i can modify the original value from a central point (the style id) rather than the series of scripts. Kinda like:<script>document.getelementbyid("image").style.opacity="grab this value from css"; //transition back to this value</script>

[justsomeguy]

You may be able to delete the property on the element to have it use the CSS property. Styles defined directly on elements always override styles defined in classes, so you may need to delete the style on the element to get it to use another one.

[ShadowMage]

Like JSG hinted at, if you set the property back to an empty string, it will revert back to whatever style it had previously (Unless that style was declared inline in your HTML).With your example, setting the opacity to an empty string:document.getElementById("image").style.opacity="";will revert the opacity back to the value specified in the style sheet. If however, you declared that style inline like:<img src='image.jpg' style='opacity: 1;' />You would first need to grab the current style and save it in a global variable before you changed its value:imgStyle=document.getElementById("image").style.opacity;document.getElementById("image").style.opacity = '0';and when you change it back, use the global variable:document.getElementById("image").style.opacity = imgStyle;The reason for this is that the style property of an element modifies its inline style attribute. So if you declare the opacity in a stylesheet then style.opacity will be empty, but if you declare it inline using the style attribute then style.opacity will have whatever value you set.

[612wharfavenue]

With your example, setting the opacity to an empty string:document.getElementById("image").style.opacity="";

This is what i was looking for, thx. I was beginning to wonder what the point of css transitions were if they made css obsolete.