10

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

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

したがって、事実上、要素を元のサイズの 30% にしました。ただし、要素の幅/高さを照会すると、変換が適用される前の要素のサイズが報告されます。

これは実際には正しい動作であり、要素のサイズは実際には変更されませんが、そのコンテンツは変更されることを理解しています。しかし、私がここで質問している理由は、要素を右クリックしてポップアップ メニューから [要素を検査] を選択すると (私は今、Mac で Safari を使用しています)、要素が強調表示され、レンダリングされたサイズは、要素に添付されたブラウザーのツールチップに表示されます。

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

4

2 に答える 2

9

getBoundingClientRect()要素に対してメソッドを使用して、寸法を取得できます。変換行列が考慮されます (そのため、自分で計算する必要はありません)。

var elementDimensions = element.getBoundingClientRect();

jsFiddle .

于 2012-06-06T02:32:09.870 に答える
7

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

これが概念実証です。

これが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トリック

于 2012-01-16T17:33:05.083 に答える