css3 - 获取translateX的值

Question

如何获取translate的值？

Answer 1

You didn’t write it clearly?

Answer 2

Just use regular expressions:

'translateX(-230px)'.match(/translateX\((.*)\)/)[1]

Answer 3

Is this an inline style? Isn’t the external style written like this a matrix?

Answer 4

Try to use jquery to get $(el).offset().left, and you can get the value of translateX normally.

After looking at jquery’s offset() method, it’s quite rewarding~

Calculation formula:

box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )

box is the positioning object of $(el)
(win.pageXOffset || docElem.scrollLeft) is the left offset of the form
(docElem.clientLeft || 0) is the left offset of document

offset() uses several properties that come with the browser DOM that I had no idea about before, such as ownerDocument, defaultView, pageYOffset, and pageXOffset. The more I learn, the less I know.

Key function: node.getBoundingClientRect()

This function is extremely powerful. It directly returns an object containing the DOM position and size.
The attributes include top, bottom, left, right, height, width.
The box in the above formula is the object returned by node.getBoundingClientRect().

The four position properties of top, bottom, left, and right are calculated relative to the upper left corner of the document view.

After searching on the Internet, Zhang Xinxu wrote an article about this function in 2011.
http://www.zhangxinxu.com/wor...