CSS 样式何时应用于 DOM？答案

【问题标题】：when the CSS styles are applied to the DOM?CSS 样式何时应用于 DOM？
【发布时间】：2016-12-06 10:30:15
【问题描述】：

我使用敲除来呈现一个动态列表，它具有 CSS 属性宽度 auto ("width: auto")，我需要知道 何时应用此 CSS . 是否有将 CSS 样式应用于 DOM 时要捕获的事件，或者 DOM 准备好可见时的事件？

 <div style: "width= auto">
  <!-- ko foreach: items -->
        <div class="list-item" data-bind="css: { active: !$parent.isActive() }">
            <a data-bind="text: Label"></a>
        </div>
  <!-- /ko -->
 </div>

谢谢

【问题讨论】：

我在这里找到了答案：stackoverflow.com/questions/15875128/…

标签： javascript jquery css knockout.js

【解决方案1】：

样式属性（您应该在其中交换 = 和 : 符号）在第一次渲染期间应用，并且将立即可见。

css 绑定在您调用 ko.applyBindings 时应用。

如果您想在应用绑定之前隐藏内容，您可以使用以下技巧：

<div class="hideUntilBind" data-bind="css: { 'hideUntilBind': false }"></div>

使用 css：

.hideUntilBind { display: none; }

【讨论】：

您好，谢谢您的帮助，我会考虑的。我的意图是用 CSS 显示一些东西，但取决于自动宽度大小。

【解决方案2】：

让我总结一下已经提到的两个选项，并添加另外两个选项：

隐身：@user3297291's option 使用斗篷般的技巧。
Vanilla JS：在对问题的评论中提到了 vanilla js solution OP。
Fork css 绑定：基于the built in css 绑定创建custom binding，允许在应用更改后进行回调。 css 绑定并没有那么大/难，所以创建一个 fork/spinoff 对我来说似乎没问题。
Foreach / AfterRender：使用afterRender on the foreach，您可以将一些代码链接到单个元素的渲染，并相应地调整DOM / CSS。

【讨论】：