Introduction to javascript techniques for Retrieving Element transform parameters _ javascript

This article briefly introduces how to obtain the transform parameter of an element in javascript and my personal understanding. When I was writing a page, I tried to use js to get the value of the translate of some elements or something. But the translate is a sub-style of the transform (barely mentioned). Naturally, the transform style is obtained first, then read the value.

The Code is as follows:

Body {-webkit-transform: translateX (20px );}

But when I tried to do this, the miracle came:

At that time, my heart almost collapsed. I just wanted to quietly get the value of translate. Who knows how to bring this product to me, although in the advanced mathematics course, all the changes (two-dimensional and three-dimensional) can be concentrated in a matrix, however, if you want to reverse parse the Matrix to get the desired value, it is not that simple.

By chance, I tried to use js again to get the value of translate. This time the result was unexpected:

When I saw this scene, it was just like a rain. Although I couldn't directly get the value I wanted, I could just match it with a regular expression.

Do you think jq has done something? Otherwise, I found that the two body styles were written differently:

First time:

The Code is as follows:

Body {-webkit-transform: translateX (20px );}

Second:

The Code is as follows:

Yes, the first time is set through css, and the second time is set through the style attribute of the body. According to my understanding, although css and style attributes can both render page elements, however, the status of the two is different. (The following include speculative components)

When a page is loaded, css and style have an effect on the rendering tree and affect the realization of elements. The difference is that style is the attribute of elements and should be saved if you set it, the idea is that a brand is deeply branded on a specific element, so when the body uses the style to set '-webkit-transform', we can use the document. body. style. webkitTransform is used to obtain the set value. Maybe you may have questions. It is better to directly obtain the css setting value. But I don't think this is possible (except for the method for parsing css files). Because the css file is loaded, the task is completed after the rendering tree is formed, the final rendering rules generated by css and style can all be implemented through window. getComputedStyle (element. Through this method, we can see that the rendering Rules produced by transform are stored in the form of a matrix maxrix (x, x) (maybe it is convenient for computer operations ),

This is interpreted as 'body' character .css ('-webkit-transform') character (). When setting a style for an element, it is actually set by setting the element style attribute (Inline). You will know it when you try it. Although this example (.).css () has the 'css 'character, it has no relationship with the 'css file', maybe this can prove what I said above: 'The value set by css cannot be obtained.

Summary:

1.css and style work together to render the tree, and the value set by style is saved as a sub-attribute of the style attribute of the element. The final rendering rule can be found through window. getComputedStyle (element ).

2.jq1_().css () method obtains the final rendering rule and sets the style attribute (Inline style)

Suggestion:

1. when we need to obtain and modify the parameters of the element transform in real time (for example, to achieve various sliding effects using translate), we should set the transform to the inline attribute of the element (set through style ), this facilitates reading

2. Although the matrix is scary, you still need to understand it if you don't want to be an ordinary page player.

The above is all the content of this article. I hope you will like it.