css3の属性値を取得・設定するjs実装方法_javascriptスキル

CSS3 では多くの属性が追加されており、読み書きの際に以前ほど便利ではなくなっていることはよく知られています。

例:

left:100px">

行間スタイルのみが考慮すると、取得する場合は div.style.left のみが必要で、設定する場合は div.style.left='100px' のみが必要です。とてもシンプルです。

しかし、css3 が登場します

例:

-webkit-transform:translate(20px,-20px)" > ;

どうすればいいですか?恐ろしい。 。 。

設定は非常に簡単です:
div.style.webkitTransform='translate(20px,-20px) ' キャメルケースの記述方法に従うだけです。

取得時:
div.style.webkitTransform の値は文字列 'translate(20px,-20px) '
必要な X 値と Y 値を取得するにはどうすればよいですか?長い間検索しましたが、簡単な解決策が見つかりませんでした。これは、文字列インターセプトまたは通常のマッチングによってのみ取得できます。

目的の 20 と -20 を取得する正規表現を記述します

reg=/-?[0-9] /g 負の符号と数字を照合します

reg2= / -?[0-9] .?[0-9]*/g 小数点が含まれる場合があります

その後、
を検索します div.webkitTransform.match(reg) //結果 [20, -20]
は、X 値と Y 値を含む配列を返します。

以下と同じ:
-webkit-transform: skew(20deg,-50deg) /* スキュー (x 軸に対して傾斜、y 軸に対して傾斜)*/

-webkit-transform:matrix(1,0.4,0,1,0,0);

などなど。 。 。