Import stylesheet dynamically with dojo

Question

what is the best (the most elegant :) way to import css stylesheet from javascript.

Maybe dojo has some module similar to dojo.require ?

Thanks for help.

Answer 1

You can simply add the <link> element to the page. After added, it will load the css.

 var element = document.createElement('link');
 element.href = 'someCssFile.css';
 element.rel = 'stylesheet';
 element.type = 'text/css';

 document.body.appendChild(element);

Answer 2

Dojo has some DOM sugar, if you like:

dojo.create("link", {href:'someCssFile.css', type:'text/css', rel:'stylesheet'}, document.getElementsByTagName('head')[0])

Long ago, Dojo's loader used to handle stylesheets and automatically pull in CSS for modules or widgets (effectively an abstraction to trigger something like the above). There were various browser quirks to deal with back then for loading style sheets. It turned out to have a lot of performance problems, so as of Dojo 1.0, style sheets are loaded directly on the page.