Geek Answers Handbook

Get CSS calculated properties for a template in Backbone.View

Is it possible to get a visualized template of calculated CSS values without by attaching it to the DOM ?

I'm interested in the values ​​of Backbone.View $ el CSS and the way to pre-calculate its properties, such as width and height, without binding them to the DOM.

If this is not possible ,

What is the best way to calculate target values ​​for rendered templates so that they can be used with jQuery.animate?

For example, the fade in / fade out function, which will be part of the extended View methods

+4
source share
1 answer

I believe that your best choice, different from performing the difficult task of inserting a hidden element, measuring, and then deleting it, is done with:

window.getComputedStyle

Documentation ( https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle )

Then configure the methods in your views like this:

 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 },

This is not perfect, and the return height and width are just a representation of the final CSS rules applied to this element. Therefore, it is possible that the actual height and width would change when the item was actually displayed on the page.

Hope this helps!

+2
source

More articles:


All Articles