web-dev-qa-db-ja.com

CSS3でスケーリングされた要素の幅/高さを取得します

私は、offsetWidthプロパティの奇妙さ（私は思う）と戦っています。
これはシナリオです：

spanタグが私のjsにあります。ある時点で、この要素に対してcss3変換を実行します。

        el.set('styles', {
            'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */
            '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */
            '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */
            '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */
            '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */ 
        }); 
        w = el.getWidth();
        console.log('after scaling: ' + w);

この時点で、ログは何を言うべきかわからないように、あいまいな値を返します。
なにか提案を？

javascripthtmlcssmootools
36
holographix

getBoundingClientRect() は、正しい値を返します。

jsFiddle 。

41
alex

変換はCSS固有のプロパティには影響しないため、正しい動作が見られます。現在の変換マトリックス（getComputedStyle（）。webkitTransformから返される）を見て、何かがスケーリングされている大きさを把握する必要があります。

更新：Firefox 12以降およびChrome/Safariでは、Alexが以下に述べるように、getBoundingClientRect（）を使用して、要素に適用されたすべての変換を考慮することができます

スケールの遷移は50％/ 50％から始まります。これがデフォルトの正しい動作だからです。 Originから開始する場合は、transform-Originを設定する必要があります。0％0％;

4
Michael Mullany

私はスパンタグが_display:block_を持っていると思いますか？変換は、ブロック要素に対してのみ機能することになっています。コンソールに移動し、jqueryをロードして（簡単にするため）、次のようにします。

$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})

何も起こりません。しかし、これを行うと：

$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})

突然変化し、offsetHeightが増加します。残念なことに、オフセットの高さは16から19になり、32にはなりません（ただし、視覚的な外観はサイズの2倍であり、おそらくそれは正確です）。

0
roberto tomás