4

是否可以在不将其附加到DOM的情况下获得渲染的模板计算的 CSS 值？

我对 Backbone.View $el CSS 值和一种预先计算它的属性（如宽度和高度）而不将它们附加到 DOM 的方法感兴趣。

如果那不可能，

计算渲染模板的目标值以便它们可以与 jQuery.animate 一起使用的最佳方法是什么？

例如，淡入/淡出功能将成为 View 扩展方法的一部分

4

1 回答 1

2

我认为除了执行插入隐藏元素、进行测量然后删除它的艰巨任务之外，你最好的选择是使用：

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 规则的表示。因此，当元素实际呈现在页面上时，实际高度和宽度完全有可能发生变化。

希望这可以帮助！

于 2013-03-11T17:37:41.657 回答