何时将CSS样式应用于DOM？

Question

我使用knockout渲染动态列表，其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>

感谢

Answer 1

首次渲染时会应用样式属性（您应在其中换出=和:符号），并且会立即显示。

当您致电css时，会应用ko.applyBindings绑定。

如果你想隐藏东西，直到你申请了绑定，你可以使用如下的技巧：

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

使用css：

.hideUntilBind { display: none; }

Answer 2

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

1. 伪装：@user3297291's option使用类似斗篷的技巧。
2. Vanilla JS ：问题评论中提到的vanilla js solution OP。
3. 分叉css绑定：根据custom binding绑定创建the built in css，允许在应用更改后进行回调。 css绑定不是那么大/难，所以创建一个fork / spinoff对我来说似乎没问题。
4. Foreach / AfterRender ：使用afterRender on the foreach，您可以将一些代码链接到各个元素的渲染，并相应地调整DOM / CSS。