17169


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

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

[code]

    $(element).css('transform', 'translate(xpx, ypx)');
    
[/code]

もしくは

[code]

    $(element).css('-webkit-transform', 'translate(xpx, ypx)');
    
[/code]

と指定すると、

[code]

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

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

[code]

    $(element).css('transform')
    $(element).css('-webkit-transform')
    
[/code]

ではnoneが返ってくる。

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

[code]

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

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

[code]

    $(element).css('transform')
    $(element).css('-webkit-transform')
    
[/code]

ではnoneが返ってくる。

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

[code]

    $(element).css('transform')
    
[/code]

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

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

[code]

    $('#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'));
[/code]

[code]

    <?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>
[/code]

cssで指定

[code]

    $('#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'));
[/code]

[code]

    #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);
    }
[/code]

[code]

    <?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>
[/code]


CC BY-SA 4.0
2015-10-02T01:13:15.883
17160
2019-12-13T14:10:45.593
2019-12-13T14:10:45.593
32986
10728
question
jquery css
CSSのtransform、translateを取得するには？


> 2.cssを直接指定  
>  cssで直接指定し、上記のプロパティで取得しようとしても
>
> $(element)[0].style.transform  
>  $(element)[0].style.webkitTransform
>
> では空文字が返ってくる。

この部分は仕様通りの動作です。[`element.style`では`style`属性の設定値のみが返されます](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style)。ですのでid指定の外部CSS値は反映されません。

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


CC BY-SA 3.0
2015-10-02T01:31:38.037
17162
2015-10-02T03:04:27.977
2015-10-02T03:04:27.977
5750
5750
17160
answer


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

[code]

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

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

[code]

    rect = document.querySelector("#rect1");
    
    // chrome
    matrix = new WebKitCSSMatrix(rect.style.transform);
    // firefox
    matrix = new DOMMatrix(getComputedStyle(rect).transform);
    
[/code]


CC BY-SA 3.0
2015-10-02T04:24:11.427
17169
2015-10-02T04:24:11.427
3054
17160
answer