This question already has an answer here:
I am creating some animations and I am attempting to write a config variable list so I can reuse this function with ease throughout my framework, though I cannot find a way to dynamically change CSS Style Properties. To get the property I use the getComputedStyle('cssStyleProperty') function, however; after I return the CSS property, and algorithmicly alter it, getComputedStyle only gets and will not set (obviously), therefore, I have to use the more commonly known 'element.style.csspropertychoice to change the propty value. This brings me to what I feel is the root-cause of my problem: 'element.style.csspropertychoice cannot be change dynamically, at-least not in anyway that I know of. I would like to know if there is anyway to dynamically choose a CSS property and change it??? Any help would be greatly appreciated, thank you Stack Over Flow Community, and Merry X-Mas.
<script>
function anime() {
let element = 'ele_B';
let px = 5;
let ms = 80;
let style_property= 'top'; // Looking for a way to make this config var work
let obj = document.getElementById(element);
let x = window.getComputedStyle(obj, null).getPropertyValue(style_property); // I can set it dynamically here
setInterval(config_anime, ms);
function config_anime() {
if (x === 800) {
clearInterval(config_anime);
} else {
x += px;
x += 'px';
obj.style.top = x; // but not here
x = (parseInt(x));
}
}
};
</script>