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);

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

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