javascript - Backbone.Viewでテンプレートの計算されたCSSプロパティを取得します

Question

DOMにアタッチせずにレンダリングされたテンプレートで計算されたCSS値を取得することは可能ですか？

Backbone.View $ el CSS値と、DOMにアタッチせずに幅や高さなどのプロパティを事前に計算する方法に興味があります。

それが不可能な場合は、

レンダリングされたテンプレートのターゲット値を計算して、jQuery.animateで使用できるようにするための最良の方法は何ですか？

たとえば、View拡張メソッドの一部となるフェードイン/フェードアウト機能

Answer 1

非表示の要素を挿入し、測定を行い、それを削除するという骨の折れる作業を実行する以外の最善の策は、次を使用することだと思います。

window.getComputedStyle 

ドキュメント（https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle）

次に、ビューのメソッドを次のように設定します。

fadeIn : function (event) {
    var rootElement = this.$el.get(0);
    var cssStyles = window.getComputedStyle(rootElement, null);
    var rootElementHeight = cssStyles.getPropertyValue("height");
    var rootElementWidth = cssStyles.getPropertyValue("width");

    // perform fadeIn animation     
},

fadeOut : function (event) {
    var rootElement = this.$el.get(0);
    var cssStyles = window.getComputedStyle(rootElement, null);
    var rootElementHeight = cssStyles.getPropertyValue("height");
    var rootElementWidth = cssStyles.getPropertyValue("width");

    // perform fadeOut animation     
},

これは理想的ではなく、返される高さと幅は、その要素に適用される最終的なCSSルールの単なる表現です。したがって、要素が実際にページにレンダリングされたときに、実際の高さと幅が変わる可能性は十分にあります。

お役に立てれば！