为什么动态css可能不会立即应用

时间：2015-12-18 10:52:25

标签： javascript

注意：我无法在jsfiddle或jsbin中复制该问题，所以不幸的是我只会通过屏幕截图来演示这个问题。

在我的工作项目中，某些JavaScript控件无法正常呈现。

Bad render

如果我将渲染逻辑包装在setTimeout(renderLogicFunction, 30);中，我发现它可以正确渲染。在实验期间发现了30。如果value小于10，则始终呈现错误。如果它大于30，它总是正确的。对于10-30，它是随机的。

Good render

我开始并排调试渲染逻辑，发现其中一列的宽度错误

Bad width

然而，渲染效果良好

Good width

这两个控件的内部HTML都是相同的。

让我们看看16px何时来自

Good CSS

这是指内联样式

Inline CSS

然后我检查了糟糕的渲染页面也有这种内联样式，但无论出于什么原因它还没有应用。

如果我让调试器去了，我可以检查CSS规则是否已经应用但是由于在渲染计算期间采用了列宽并且其当前宽度不再被考虑，所以为时已晚。解决它的唯一方法是触发控件的刷新。但我认为它根本不优雅。

你有什么想法会发生这种情况吗？

2 个答案:

答案 0 :(得分：0)

如果你需要一个样式来进行覆盖，并且能够覆盖同一样式的先前规则，你可以添加它！重要

div { width:100%; }
div { width:50%; }

将div元素渲染为50％宽度，而

div { width:100% !important!; }
div { width:50%; }

将div元素渲染为100％。

如果您明智地在CSS样式上使用它，那么您可能能够解决您的问题。

答案 1 :(得分：0)

我猜你正在使用一些调整列大小的第三方库。

而不是setTimeout(renderLogicFunction, 30);它可能会替换为jQuery的文档准备，https://learn.jquery.com/using-jquery-core/document-ready/

相关问题
最新问题