CSS3変換要素のサイズを取得します

StackOverflow https://stackoverflow.com/questions/8883503

質問

CSS3変換を適用したDIVのサイズを取得したいと思います。

-webkit-transform: scale3d(0.3, 0.3, 1);

そのため、効果的に元のサイズの30％の要素を作成しました。ただし、要素の幅/高さを照会すると、変換が適用される前に要素のサイズを報告します。

これは実際には正しい動作であり、要素は実際にはサイズを変更しないが、そのコンテンツはそうであることを理解しています。しかし、ここで私が尋ねている理由は、要素を右クリックしてポップアップメニューから「要素を検査する」（今すぐMacでSafariを使用している）を選択した場合、要素が強調表示され、レンダリングされたサイズは、要素に接続されたブラウザツールチップに表示されます。

したがって、これは、ブラウザがレンダリングされたサイズを「知っている」ことを示唆していますが、この情報にアクセスする方法はまだ見つかりません。誰かが私を助けることができますか？

役に立ちましたか？

解決

うわー、これは私が思っていたよりもトリッキーでした。私はあなたと同じくらい簡単な方法がないことに驚いています。

これが概念の証明です。

これがJSです：

$('div').each(function() {
    var matrix = window.getComputedStyle(this).webkitTransform,
        data;
    if (matrix != 'none') {
        data = matrix.split('(')[1].split(')')[0].split(',');
    } else {
        data = [1,null,null,1];
    }
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]);
});

キーは次のとおりです getComputedStyle() 有用になる前にアレイに解析する必要がある文字列としてマトリックスを不快に返す関数。ただし、レンダリングされた変換比が含まれています。これは、レンダリングされたサイズを取得するためにCSSディメンションを掛けることができます。

参照： CSSトリック

他のヒント

使用できます getBoundingClientRect() 寸法を取得する要素の方法。変換マトリックスを考慮します（自分で数学をする必要はありません）。

var elementDimensions = element.getBoundingClientRect();

jsfiddle.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top