1

I'm writing some javascript code that heavily manages the DOM and I'd like to be confident that my code is efficient.

I'm wondering whether there is a native, browser-provided API allowing javascript to manage complex css attributes? I am interested in performance so I would like to use tools that are as native as possible.

If I open the console on any webpage I can type and witness the following:

>>> window.document.body.style.transform = 'translate(0, 0)';
"translate(0, 0)"
>>> window.document.body.style.transform
"translate(0px, 0px)"

Obviously the style.transform property is not a simple property for it is reformatting 0 as 0px. But the value of the style.transform property is a simple string!

Is there any API for managing complex css attributes such as transform?

Something like the following?

>>> 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 }

Obviously I have invented the niceTransform property and CSSTransformTranslate class. Do browsers provide javascript with an api for managing complex css properties? If so, could I get a link to such documentation?

Thanks!

Improve this question
6
  • Could you please clarify what you mean by complex css properties? According to the spec "The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional." Commented May 16, 2017 at 20:43
  • This css documentation may be helpful, best of luck! Commented May 16, 2017 at 20:45
  • For example font-style is not a complex property. The font-style property has no sub-properties; it is simply an inline string such as "serif" or "sans-serif". But the transform property is complex - it has scale, translate, and rotate properties, and each of those components has further sub-properties. (e.g. transform has x, y, and z properties). Commented May 16, 2017 at 20:46
  • You're looking for the CSSOM. Commented May 16, 2017 at 20:48
  • I'm not sure that CSSOM link has anything to say about manipulating complex css attributes! If it does, or it doesn't because such a thing doesn't exist, please post an answer :) Commented May 16, 2017 at 20:54

2 Answers 2

Reset to default
1

No, the style properties are all strings; they only accept a string, so if you wanted an API like that you would have to create it yourself, keep track of the states of all properties, and then set the transform string when a change is made.

That said, there is something kind of similar in CSSMatrix. CSSMatrix itself has been deprecated, and it has vendor prefixed versions, and there is a newer DOMMatrix...it's a bit of a mess. I do see that there is at least one polyfill but I've never used it so try it at your own risk.

But the nice thing about the matrix is that in JS you can get the current transform as a Matrix, apply a skew/rotate/translate to that Matrix, and then set the transform property to your updated Matrix. That does some of what you are looking for, I think; you would just need to decide if implementing it is worth it based on the browser support you need.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

CSS3 supports transforms natively https://www.w3schools.com/css/css3_2dtransforms.asp You can just add/modify the necessary rule in the stylesheet through javascript.

Since you're manipulating the DOM heavily, i would also recommend using JQuery, since it is universally known and well optimized.

Improve this answer

4 Comments

I'm looking for a javascript API, not css!
What i'm saying is to use javascript to set the CSS. Is there any reason you want a javascript api over css/html? You should want to minimize the javascript to cut down on load times, since the javascript libraries will be editing the CSS anyway.
Setting transforms vs stacking transforms are very different things, I think OP is asking for the latter. The former is quite straightforward, the latter not so.
I'm looking to manage the transform property in an object-oriented way. Currently I'm not aware of any way to access a transform.translate.x property. If I want to change an element's x position, I need to set the entire transform property. I essentially asked my question to determine if I can avoid setting the entire transform property, and drill straight down the the transform.translate.x property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.