Question

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

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

（请注意，我在页面加载后运行了很多javascript，生成了更多的html（带样式），因此在页面的javascript完成时，document.ready和window.load已经被激活了）< / p>

（另请注意，只是等待加载样式表文件的问题 - 更多的是等待所有来源的样式应用）

这可能吗？

更新

基于@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
});

虽然这似乎有效但我不确定它是否确实 - 很难说 - 我仍然存在这个问题。在继续使用样式之后，我怎样才能确定以上实际应用样式？＆＃34;？

Javascript等待应用所有元素样式

0 个答案: