«

Is there a way to load CSS at runtime using JS in IE and Mozilla (and
optionally Opera)? I've been able to do this with scripts by using the DOM.

I'm trying to stage loading up certain components of a page ONLY when
they are required to improve initial load times.

Brett

Brett Foster wrote:

> Is there a way to load CSS at runtime using JS in IE and Mozilla (and
> optionally Opera)? I've been able to do this with scripts by using the DOM.

Create a <link> element with the desired properties and insert it into
the head of the document e.g.
var link;
if (document.createElement && (link = document.createElement('link')))
{
link.href = 'whatever.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(link);
}
}

--

Martin Honnen
http://JavaScript.FAQTs.com/

Martin Honnen wrote:
>
>
> Brett Foster wrote:
>
>> Is there a way to load CSS at runtime using JS in IE and Mozilla (and
>> optionally Opera)? I've been able to do this with scripts by using the
>> DOM.
>
>
> Create a <link> element with the desired properties and insert it into
> the head of the document e.g.
> var link;
> if (document.createElement && (link = document.createElement('link')))
> {
> link.href = 'whatever.css';
> link.rel = 'stylesheet';
> link.type = 'text/css';
> var head = document.getElementsByTagName('head')[0];
> if (head) {
> head.appendChild(link);
> }
> }
>
Why not in the head-section:

document.write('<link rel="stylesheet" type="text\/css" href="w.css">');

Less characters, easy to understand and remember . But if there is a
reason to avoid this , I listen carefully.

optimistx wrote:


> Why not in the head-section:
>
> document.write('<link rel="stylesheet" type="text\/css" href="w.css">');

I think the original poster wants to be able to load a stylesheet with
script after the page has been loaded and then document.write doesn't help.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Martin Honnen wrote:
>
>
> Brett Foster wrote:
>
>> Is there a way to load CSS at runtime using JS in IE and Mozilla (and
>> optionally Opera)? I've been able to do this with scripts by using the
>> DOM.
>
>
> Create a <link> element with the desired properties and insert it into
> the head of the document e.g.

Mozilla recognizes the style sheet has been inserted, but no styles seem
to have been loaded/applied.

> var link;
> if (document.createElement && (link = document.createElement('link')))
> {
> link.href = 'whatever.css';
> link.rel = 'stylesheet';
> link.type = 'text/css';
> var head = document.getElementsByTagName('head')[0];
> if (head) {
> head.appendChild(link);
> }
> }
>

Brett Foster wrote:

> Martin Honnen wrote:
>

>> Create a <link> element with the desired properties and insert it into
>> the head of the document e.g.
>
>
> Mozilla recognizes the style sheet has been inserted, but no styles seem
> to have been loaded/applied.
>
>> var link;
>> if (document.createElement && (link = document.createElement('link')))
>> {
>> link.href = 'whatever.css';
>> link.rel = 'stylesheet';
>> link.type = 'text/css';
>> var head = document.getElementsByTagName('head')[0];
>> if (head) {
>> head.appendChild(link);
>> }
>> }

I have code similar to the above in an example here:
<http://home.arcor.de/martin.honnen/javascript/200502/test2005022501.html>
there with both Firefox 1.0 and Netscape 7.2 the stylesheets are loaded
and the CSS is applied.

If you still have problem, then show us exactly what you are doing,
which Mozilla version you use, how the CSS looks, hopefully reduced to a
simple test case.


--

Martin Honnen
http://JavaScript.FAQTs.com/