css3 - 获取translateX的值
PHPz
PHPz 2017-04-17 11:52:32
0
4
802

如何获取translate的值?

PHPz
PHPz

学习是最好的投资!

reply all(4)
小葫芦

You didn’t write it clearly?

Peter_Zhu

Just use regular expressions:

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

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

左手右手慢动作

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template