javascript - 在 CSS 动态加载和渲染后运行 javascript

Question

我想动态加载css文件，并在文档上呈现css后运行js脚本。我想使用由加载的css设置的元素的新宽度和高度。所以在渲染后运行js很重要。是否可以？我正在使用 jQuery。

score 3 · Accepted Answer

听起来像是SidJS的工作：

SidJS 是一个轻量级的 JavaScript 库，它允许按需包含 JavaScript 脚本和 CSS 样式表。它支持与加载过程相关的回调，以保证您正在加载的资源在您需要时可用。

换句话说，您请求一个样式表并提供一个回调函数。加载样式表时执行回调函数。例子：

Sid.css("my-sheet.css", function() {
    // Perform your width/height logic here.
});

我不完全确定在执行回调时文档是否有时间重绘，但您应该尝试一下。在最坏的情况下，您只需使用setTimeout.

score 1 · Accepted Answer

我了解您的需求，但我强烈建议您仅在所有替代方案都失败后才这样做。

你有多少个 CSS 文件？他们有什么不同？

在 JS 中设置样式甚至比使用它来加载 CSS 文件更好。

此外，如果您需要让 JS 知道从 CSS 文件加载的样式，那么 JS 需要知道这些文件在哪里，对吧？提供这些信息而不是文件 URL 不是更容易吗？

如果不知道为什么您只会在页面加载后才知道要加载哪个文件，就很难考虑替代方案。如果它基于一些用户输入，您可以只为一组类创建一个具有不同样式的 CSS 文件，并使用 JS 更改元素类，从而删除一个类样式并为其应用新的类样式。

始终尝试将所有样式保存在一个独特的文件中，尝试保持其组织和紧凑，并始终可以重复使用。然后根据需要使用 JS 更改样式、类和元素。

2 回答 2