How do I check the Css transform property value of an element that you have changed using Javascript?

Question

Please help me out with this code, The toggle button mirrors the text while the check button is supposed to check whether the text is inversed or not. It does this by retrieving the value of the transform property of the text and checking if it is inversed or not. An alert box is to pop up based on the transform property value retrieved and state whether the object is inversed or normal. The problem is the check function is only working for the default css value and not the value that I have assigned to the transform property using javascript. If my code is too messy or you do not understand my question please let me know I will try to be more clear. Any help will be greatly appreciated!

https://code.sololearn.com/WLYpMa1wJ0Is/?ref=app

Answer 1

If you want to get the transform properties of an element you should use the window's getComputedStyle(element) method, which will give you an object of all the styles of the element, by writing element.style you only get the inline styles so getComputedStyle(element) is the method you gotta use if you have styled the element from inside a style tag or an external CSS file. Then you can use the getPropertyValue("property") method on the object that was returned to get a property's value or setProperty("property", "value") to set a property's value.

When you access the transform property a string of whatever is written inside the transform property should be returned. From there what you need to do to only read or replace specific values such as to only change the rotate value is to learn regular expressions and string methods that can be used to replace or get specific parts of a string.

Answer 2

If you don't know how to use regular expressions another simple way to deal with transform property is to simple use CSS variables to set your transformations and then access those CSS variables through JavaScript instead. Here is a video about CSS variables: https://youtu.be/oZPR_78wCnY

Answer 3

I made this:
https://code.sololearn.com/WE60F0zoPXfv/?ref=app

Answer 4

Karak10 Thank you so much! I was so frustrated when my code was not working, you have really helped me out

Answer 5

Karak10 thank you so much for answering, I did use the getComputedStyle method but I forgot to include my code in the question ( sorry about that) , I have now edited the question and included the link to my code bit. if you can, please have a look at it.

Thanks you for the youtube tutorial on css variables I will definitely check it out