2

我需要使用一些 javascript/jquery 解决（即“应用”，而不仅仅是加载到内存中）HTML 网页的所有元素的所有样式。样式可以在元素的样式标记内内嵌，在页面样式内内嵌，或者在样式表的外部。

我已经看到使用带有 setTimeout 的 window.getComputedStyle 解决单个元素甚至单个样式的示例，但我需要确保所有元素都已解决（不仅仅是一个甚至一组）。

（请注意，在页面加载后我有很多 javascript 在运行，这会生成更多的 html（带有样式），因此 document.ready 和 window.load 在页面的 javascript 完成时已经触发）

（还要注意，这不仅仅是一个关于等待样式表文件加载的问题——它更多的是关于等待所有来源的样式被应用）

这可能吗 ？

更新

基于来自@Kaiido 的示例，我提出了以下内容（它使用 JQuery Deferred 而不是 Javascript Promise - 这是因为我更熟悉 Deferred 并且我需要它符合内部 JQuery 标准）

<style>
    .myStyle {...}
    .myStyle2 {...}
</style>

var cssIsAppliedPromise = function(){
    var trigger = document.createElement('style');
    trigger.innerHTML = 'body{opacity:1;}';
    var waiter = document.createElement('style');
    waiter.innerHTML = 'body{transition : opacity 0.1s linear; opacity:.9}';
    var deferred = $.Deferred();
    // will trigger only when all styles are applied
    function isDone(evt) {
        // some cleanup
        waiter.parentNode && document.head.removeChild(waiter);
        trigger.parentNode && document.head.removeChild(trigger);
        // resolve the promise
        deferred.resolve();
    }
    document.body.addEventListener('transitionend', isDone, {
        once: true
    });
    document.head.appendChild(waiter);
    // append it only when all resources are fetched
    window.onload(function() {
        document.body.offsetWidth; // trigger a reflow
        document.head.appendChild(trigger);
    });
    return deferred.promise();
}
cssIsAppliedPromise.done(function(){
        //logic after styles applied
});

虽然这似乎有效，但我不确定它是否有效 - 很难说 - 我的问题仍然存在。在继续“应用样式后的逻辑”之前，我如何确定上述内容实际应用了样式？

4

0 回答 0