Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72358

How can I dynamicly return a style property using Javascript? [duplicate]

$
0
0

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>

Viewing all articles
Browse latest Browse all 72358

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>