给定一个样式属性字符串,我需要捕获 CSStranslate()
属性的 x 和 y 值。数字可以是零、正数或负数、浮点数或整数,并且只能是像素单位。
一个实用的样式属性字符串示例:
min-height: 100%;
min-width: 100%;
transition-property: transform;
transform-origin: 0px 0px;
transform: translate(123px, 0px) translateZ(0px);
我有一个可行的,虽然非常丑陋的解决方案。这是一个细分:
var transform = element.style['transform']
-transform
变量然后包含这个字符串:"translate(123px, 0px) translateZ(0px)"
然后我将它与:
transform = transform.match(/translate\(-?[0-9]+(\.[0-9]*)?px, -?[0-9]+(\.[0-9]*)?px\)/);
我这样做是因为如果有另一个转换属性,rotate(20px, 20px)
例如,我可以避免它。
正则表达式产生这个数组:["translate(123px, 0px)", undefined, undefined]
.
然后按顺序使用另一个正则表达式,以仅匹配数值:
transform = transform[0].match(/(-?[0-9]+(\.[0-9]*)?)px, (-?[0-9]+(\.[0-9]*)?)px/);
然后我剩下以下数组:["123px, 0px", "123", undefined, "0", undefined]
并完成我需要做的一切,parseInt(transform[1])
并parseInt(transform[3])
实际使用这些价值观。
仅获取这两个数字似乎工作量太大,但是我对正则表达式的经验不是很丰富,而且我不知道如何简化这一点。有没有更优雅的解决方案?
编辑:我会特别乐意把它全部变成一个正则表达式:)