Javascript等待应用所有元素样式

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

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

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

（还请注意，这不仅仅是等待加载样式表文件的问题，更重要的是等待应用来自所有源的样式）

这可能吗

更新

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

.myStyle{…}
.myStyle2{…}
var cssIsAppliedPromise=函数（）{
var trigger=document.createElement（'style'）；
trigger.innerHTML='body{opacity:1；}'；
var=document.createElement（'style'）；
waterer.innerHTML='body{transition:opacity 0.1s linear；opacity:.9}'；
var deferred=$.deferred（）；
//将仅在应用所有样式时触发
功能isDone（evt）{
//一些清理
waterer.parentNode&&document.head.removeChild（waterer）；
trigger.parentNode&&document.head.removeChild（触发器）；
//兑现诺言
延迟。解决（）；
}
document.body.addEventListener（'transitionend'，IsOne{
一次：对
});
文件。负责人。儿童（服务员）；
//仅在获取所有资源时追加它
window.onload（函数（）{
document.body.offsetWidth；//触发回流
document.head.appendChild（触发器）；
});
延迟返回。承诺（）；
}
cssIsAppliedPromise.done（函数（）{
//应用样式后的逻辑
});

---

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

可能重复感谢Kaido-提供的链接更多的是关于等待样式表文件加载-我想了解更多关于等待样式的信息（来自所有源-元素样式标记、内嵌样式、外部样式）要应用于所有html元素，StransitionEnd事件将执行此操作。请参阅提供的linkFrom linked question：“它可以工作，但我有一个函数需要在应用CSS后运行”。在您的情况下，您甚至不需要将样式表放在外部文件中，只需将它们直接附加到头部即可。以下是将上一个答案改写为js函数：

<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
});