0

スタイル属性文字列を指定すると、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])、実際に値を操作するために。

これは、これら2つの数値だけを取得するには手間がかかりすぎるように思えますが、正規表現の経験があまりなく、これを合理化する方法がわかりません。これに対するよりエレガントな解決策はありますか？

編集：私はそれをすべて単一の正規表現に変換することを特に嬉しく思います:)

4

2 に答える 2

2

非キャプチャとしてグループをマークできますが(?:.)、キャプチャとしては機能しませんが、それ以外は通常どおり動作します。そして\dと同じ[0-9]です。ただし、これはとにかく有効な CSS でなければならないため、データは有効な整数/浮動小数点数であると想定でき、オプションのキャプチャを実行する必要はありません (望まない場合)。

私はするだろう：

transform = transform[0].match(/(-?[.\d]+)px, (-?[.\d]+)px/);

または、オプションの小数点の非キャプチャ グループを使用する場合:

transform = transform[0].match(/(-?\d+(?:\.\d+)?)px, (-?\d+(?:\.\d+)?)px/);
于 2012-11-20T18:48:35.777 に答える
0

次のようにして、2 つの手順を 1 つに組み合わせることができます。

transform = transform.match(/translate\((-?\d+(?:\.\d*)?)px, (-?\d+(?:\.\d*)?)px\)/);

または、入力を信頼できる場合は、次のことができます。

transform = transform.match(/translate\((.*)px, (.*)px\)/);

正規表現を簡素化します。

于 2012-11-20T18:49:46.833 に答える