Home > Developer > JavaScript
Before writing the page has tried to use JS to get some elements of the value of translate or something, but translate is transform's sub-style (reluctantly said), of course, is to get the transform style, and then read the value inside.
But when I try to do this, miracles happen:
At that time my heart is almost collapsed, I just want to quietly get the value of translate Ah, who knows to pop this goods to me, although a high number of lectures when also mentioned all changes (two-dimensional, three-dimensional) effect can be condensed in a matrix inside, But it's not so easy to reverse-parse the matrix and get the value I want.
A chance, I again want to use JS to get the value of translate, this time the result is unexpected:
See this scene, it is simply a tear, although not directly to get the value I want, but take the right match will be OK.
Do you think JQ did it? In fact, I was compared to a moment, found two times the body style of writing is not the same:
First time:
Second time:
Yes, the first time is through the CSS settings, the second is through the body style property set, according to my understanding, CSS and style properties, although the page elements can be rendered, but the status is not the same. (The following are speculative elements)
When the page is loaded, CSS and style for the rendering of the tree has a role, will affect the transformation of elements, the difference is that the style is the attributes of the element, what the user set what should be saved, just want a brand deeply branded on a specific element, so when the body through the style set '- Webkit-transform ', we can get the set value by Document.body.style.webkitTransform. Perhaps you have the question, that directly obtains the CSS setting the value not to be good. But I don't think that's going to work (except for parsing CSS files), because the CSS file is loaded, the task is done after the render tree is finished, and the rules that CSS and style produce to render the elements can be passed through the window.getComputedStyle ( Element) found. In this way, we can see that the final rendering rule produced by transform is preserved in the form of Matrix Maxrix (X,x,x,x,x) (perhaps a computer-friendly operation),
This explains why $ (' body '). CSS ('-webkit-transform ') the goods will return to the matrix, and also see the $ (). CSS () The method is to return the result (that is, window.getComputedStyle (element)) from the browser's final rendering rule, so it cannot read your CSS settings parameters, and when you set the style for the element with $ (). CSS () In fact, it is set by setting the element style property (inline), and you'll know it if you try. Although this $ (). CSS () has the word "CSS", but it and ' CSS file ' does not have a half cents relationship, perhaps this can prove above I said: ' Can't get the value of CSS set directly '.
Summarize:
The 1.css and Style act together to render the tree, and the value of the style setting is saved as a child of the element's style property, and the final rendering rule can be found by window.getComputedStyle (element)
The 2.jq$ (). CSS () method gets the final rendering rule, which is set with the Style property (inline style)
Suggestions:
1. When we need to get and modify elements transform in real time (for example, with translate to achieve various sliding effects), you should set transform as an inline property of the element (through the style setting) so that you can easily read
2. Although the matrix is frightening, but if you do not want to become an ordinary page, you still need to understand
The above mentioned is the entire content of this article, I hope you can enjoy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
