I want to target a dom element and move it horizontally, or vertically, using JS and basic commands(no additional frameworks/libraries)
So far i found two approaches. One is to set element positioning to relative and manipulate top/left/bottom/right values. The other is to manipulate via transform(). For example element.style.transform='translate(100px)'.
Im slightly worried this is using inline styling.
Any suggestion/recommendations which approach to use, or maybe there is a different one? Maybe applying classes? Althought im already using classes for another perpose and it will be messy to include another batch of classes to work with.
1 Like
Yes, it is, but why are you worried about it? If you really donât want to do that, then there is the Web Animations API, which gives you access to the exact same underlying things as CSS animations (and same hooks: transitions, keyframes), so itâs the same thing but totally in JS. But otherwise you need to modify CSS, so, like youâre doing, itâs fine.
2 Likes
I would suggest using classes. I donât think it would be messy to include a few utility classes such as âmove-leftâ, âmove-rightâ, etc. Plus, they are reusable.
problem is i already use similar utility classes, to handle other things. There are parts in my code where i clear the whole class list(of the elements in question), before adding new classes. It will certainly interfere with any additional âutilityâ classes as the code so far was written with the assumption there are only the current ones and it could lead to unexpected behavior.
No matter im not a fan of manipulating the styling inline with JS to reach my goal, i will use this approach as it would be good opportunity to see how it works, as i scarsly used it before and maybe ill prove myself wrong and find it more appropriate.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.