As I dive into my JavaScript code that heavily manipulates the DOM, efficiency is key. I'm on the hunt for a native browser API that allows me to handle complex CSS attributes with ease. Performance matters to me, so using tools that are as native as possible is essential.
When I open the console on any webpage and experiment, I notice something interesting:
>>> window.document.body.style.transform = 'translate(0, 0)';
"translate(0, 0)"
>>> window.document.body.style.transform
"translate(0px, 0px)"
It seems like the style.transform property isn't straightforward since it formats 0 as 0px. But at its core, the value of style.transform is just a simple string!
Is there an API out there specifically designed for managing intricate CSS attributes such as transform?
Something along the lines of this hypothetical scenario:
>>> var elem = document.getElementById('some-id');
>>> elem.style.niceTransform.translate
null
>>> elem.style.niceTransform.rotate
null
>>> elem.style.niceTransform.scale
null
>>> elem.style.niceTransform.translate = 'transform(10, 20, 30)';
>>> elem.style.niceTransform.translate
CSSTransformTranslate { x: 10, y: 20, z: 30 }
>>> elem.style.niceTransform.translate.y += 20;
>>> elem.style.niceTransform.translate
CSSTransformTranslate { x: 10, y: 40, z: 30 }
In this case, I've created the fictional niceTransform property and CSSTransformTranslate class. Could browsers offer JavaScript an API for handling complex CSS properties? And if they do, could someone point me in the direction of documentation for it?
Appreciate the help!