3

cssのtransformプロパティについて質問があります。
transformプロパティに、translate(xpx, ypx)を指定した場合のデータを取得するには、どのようにしたらよいでしょうか?
この時、文字列以外の形式で取得したいです。
ウェブブラウザ:Google Chrome バージョン 45.0.2454.101 m

・試したこと
1.jqueryでcssを適用した場合

$(element).css('transform', 'translate(xpx, ypx)');

もしくは

$(element).css('-webkit-transform', 'translate(xpx, ypx)');

と指定すると、

$(element)[0].style.transform
$(element)[0].style.webkitTransform

で値が文字列で取得できる。

$(element).css('transform')
$(element).css('-webkit-transform')

ではnoneが返ってくる。

2.cssを直接指定
cssで直接指定し、上記のプロパティで取得しようとしても

$(element)[0].style.transform
$(element)[0].style.webkitTransform

では空文字が返ってくる。

$(element).css('transform')
$(element).css('-webkit-transform')

ではnoneが返ってくる。

なお、firefox(41.0.1)では
jqueryでcss適用しても、css直接指定しても、

$(element).css('transform')

でmatrixとしてデータが返ってくるのは確認済みです。

ソースを張っておきますのでご確認ください。
jqueryで指定

$('#rect1').css('transform', 'translate(50px, 50px)');
$('#rect1').css('-webkit-transform', 'translate(50px, 50px)');
$('#rect1').css('-moz-transform', 'translate(50px, 50px)');
$('#rect1').css('-o-transform', 'translate(50px, 50px)');
$('#rect1').css('-ms-transform', 'translate(50px, 50px)');


$('#value1').text('style.transform: '+$('#rect1')[0].style.transform);
$('#value2').text('style.webkitTransform: '+$('#rect1')[0].style.webkitTransform);
$('#value3').text('transform: ' + $('#rect1').css('transform'));
$('#value4').text('-webkit-transform:	' + $('#rect1').css('-webkit-transform'));
$('#value5').text('-moz-transform: ' + $('#rect1').css('-moz-transform'));
$('#value6').text('-o-transform: ' + $('#rect1').css('-moz-transform'));
$('#value7').text('-ms-transform: ' + $('#rect1').css('-moz-transform'));
<?xml version="1.0" ?>
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style='background:gray;'>
    <rect id='rect1' x="0" y="0" width="100" height="100" />
</svg>
<p id='value1'></p>
<p id='value2'></p>
<p id='value3'></p>
<p id='value4'></p>
<p id='value5'></p>
<p id='value6'></p>
<p id='value7'></p>

cssで指定

$('#value1').text('style.transform: '+$('#rect1')[0].style.transform);
$('#value2').text('style.webkitTransform: '+$('#rect1')[0].style.webkitTransform);
$('#value3').text('transform: ' + $('#rect1').css('transform'));
$('#value4').text('-webkit-transform:	' + $('#rect1').css('-webkit-transform'));
$('#value5').text('-moz-transform: ' + $('#rect1').css('-moz-transform'));
$('#value6').text('-o-transform: ' + $('#rect1').css('-moz-transform'));
$('#value7').text('-ms-transform: ' + $('#rect1').css('-moz-transform'));
#rect1 {
    transform: translate(50px, 50px);
    -moz-transform: translate(50px, 50px);
    -webkit-transform: translate(50px, 50px);
    -o-transform: translate(50px, 50px);
    -ms-transform: translate(50px, 50px);
}
<?xml version="1.0" ?>
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style='background:gray;'>
    <rect id='rect1' x="0" y="0" width="100" height="100" />
</svg>
<p id='value1'></p>
<p id='value2'></p>
<p id='value3'></p>
<p id='value4'></p>
<p id='value5'></p>
<p id='value6'></p>
<p id='value7'></p>

2 件の回答 2

2


Chrome ではgetComputedStyleで "none" が返るようですね。なぜでしょうか。

rect = document.querySelector("#rect1");
transform = getComputedStyle(react).transform;
// firefox -> "matrix(1, 0, 0, 1, 50, 50)"
// chrome  -> "none"

文字列でなく行列を得たい場合、Chrome はWebKitCSSMatrixtranslate関数などを使った文字列をパース出来るようなのでstyle.transformが使える場合はこれでいいかもしれません。
Firefox のDOMMatrixmatrix関数しかパースしないように見えますが、こちらは getComputedStyleが機能するので、これを使えばよさそうです。
(これが仕様に沿ったやり方かはまったく分かりません)

rect = document.querySelector("#rect1");

// chrome
matrix = new WebKitCSSMatrix(rect.style.transform);
// firefox
matrix = new DOMMatrix(getComputedStyle(rect).transform);
1
  • 回答ありがとうございます。これで得た行列を解析して値を取り出そうと思います。
    – 02773
    Commented 2015年10月2日 4:31
0

2.cssを直接指定
cssで直接指定し、上記のプロパティで取得しようとしても

$(element)[0].style.transform
$(element)[0].style.webkitTransform

では空文字が返ってくる。

この部分は仕様通りの動作です。element.styleではstyle属性の設定値のみが返されます。ですのでid指定の外部CSS値は反映されません。

外部CSSも含めたスタイルはwindow.getComputedStyle(element)で求められます。

2
  • 回答ありがとうございます window.getComputedStyle(element) を試してみたのですが、やはりnoneが返ってきます もう少し調査してみます jsfiddle.net/2s7hbnv0
    – 02773
    Commented 2015年10月2日 2:14
  • @02773 上記は回答というよりは質問文に対するコメントのようなものです。上記の変更でFirefoxやEdgeでは想定通りの値が取得できるようになりますが、jQuery.cssではもともとwindow.getComutedStyleを考慮した仕様なのでChromeでは効果がないと思います。
    – pgrho
    Commented 2015年10月2日 3:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。