Thank you so much for the guidance on this. Being new to JS and front-end coding, I’m still finding it difficult to find advice on “best practices” for given issues, and am really glad that with my decision to keep up my subscription here! Your observation about “throwing things wildly at the problem” is apt. I’m trying anything I manage to find that might work.
The use of !important and clearing the inline value (as opposed to removing the property) will be cleaner solutions than what I came up with on my own. While updating, I’ll also put serious thought into whether the situation can be handled with the use of classes.
Yes, the goal application is a “slide show” of sorts. My goal is to write a comic-book reader. Here is a work-in-progress test case url. I am including some keyboard controls: first pass has AWSZ for image motion, left/right arrows for page turns, up/down arrows for magnification, and most importantly spacebar for progressing forward. A goal is to allow the reader to make progress through the comic with minimal distraction (just a click or touch on the right side, or hitting the spacebar). But I’ve yet to solve conveying the optional keyboard controls to the user. The “TODO” list also many things such as using icons for the magnification, and implementing the !important solution you cited.
The main basis of positioning the page graphic does make use of your principle about using classes. But there are likely many places where the code can be made cleaner and more efficient. One place that seems fishy to me is with my use of mousemotion/touchmotion, and whether I can do something (debouncing in some form?) to reduce the number of calls, or the amount of processing that is done per call.
Was taught: first get it to work, then get it to work more efficiently (on an as-needed basis).