I have a page where i'm using both CSS and Javascript to edit values like:
document.getElementById("Doc1").style.opacity = "value"; However in this scenario, i can't seem to make it work because i can't get to #Image1
#Image1 =/= element.style
What i'm trying to do is change animation-play-state using the id = "Image1". Any solution?
When you edit the style of an element using the following:
document.getElementById("Doc1").style.opacity = "value"; You are setting the inline style of an element, not the styles applied by the #Image block.
If you'd like to edit the styles applied by the #Image block, there is some browser support for it using functions like insertRule() and deleteRule().
Instead of editing the styles applied by a stylesheet, I would add or remove classes from elements.
<div id="my-div" class="is-running">test</div> <style> .is-running { animation-play-state: running; } .is-paused { animation-play-state: paused; } </style> <script> document.getElementById('my-div').classList.remove("is-running"); document.getElementById('my-div').classList.add("is-paused"); </script> 
classList.add will add a new class. Again, I suggest against trying to modify classes applied by a stylesheet, and to instead control which predefined classes are applied to elements by modifying the element's list of classes. Sorry if I'm having trouble explaining this.You can either remove the # from the string and use getElementByID or just use querySelector and pass the full ID.
id = id.replace("#",""); document.getElementById(id).style.opacity = "value"; or
document.querySelector("#Image1").style.opacity = "value"; If your issue is the animation-play-state part you can use this method:
document.getElementById(id).style["animation-play-state"] = "paused"; 