javascript - when the dynamic stylesheets is applied? -


i load style.css dynamically in javascript. when style loaded, i'll calculation depends on styles. code this:

link = document.createelement('link'); link.href = 'sheety.css'; link.rel = 'stylesheet'; document.head.appendchild(link); link.onload = function(){     //some code     //here, can't the correct style sometime.     //but of time, can correct style     settimeout(function(){         //here, can correct style     }, 1000); }; 

so, question is: when style applied successfully?
if modify element's position(width, height), can correct value instant, or must wait time let browser using settimeout() function?


i read resources says: call dom.getcomputedstyle cause browser reflow. indeed call method, still wrong width/height of dom.

when debug js code in chrome, can see style not applied @ break point (from style tab in chrome developer tools).

once style sheet loaded, cssom or cssobjectmodel generated. along dom, cssom rasterized rasterizer , applied (in chrome, done skia).

a style can said applied when browser completes reflow or repaint. can force browser redraw using many techniques:

  1. element.hide().show(); #using jquery
  2. inserting node dom , removing it.

these techniques better explained in similar question.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -