CSS loading using JS

[Brett Foster]

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

[Martin Honnen]

Re: CSS loading using JS



Brett Foster wrote:
[color=blue]
> 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.[/color]

Create a <link> element with the desired properties and insert it into
the head of the document e.g.
var link;
if (document.creat eElement && (link = document.create Element('link') ))
{
link.href = 'whatever.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getEle mentsByTagName( 'head')[0];
if (head) {
head.appendChil d(link);
}
}

--

Martin Honnen

http://JavaScript.FAQTs.com/

[optimistx]

Re: CSS loading using JS

Martin Honnen wrote:[color=blue]
>
>
> Brett Foster wrote:
>[color=green]
>> 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.[/color]
>
>
> Create a <link> element with the desired properties and insert it into
> the head of the document e.g.
> var link;
> if (document.creat eElement && (link = document.create Element('link') ))
> {
> link.href = 'whatever.css';
> link.rel = 'stylesheet';
> link.type = 'text/css';
> var head = document.getEle mentsByTagName( 'head')[0];
> if (head) {
> head.appendChil d(link);
> }
> }
>[/color]
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.

[Martin Honnen]

Re: CSS loading using JS



optimistx wrote:

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

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/

[Brett Foster]

Re: CSS loading using JS

Martin Honnen wrote:[color=blue]
>
>
> Brett Foster wrote:
>[color=green]
>> 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.[/color]
>
>
> Create a <link> element with the desired properties and insert it into
> the head of the document e.g.[/color]

Mozilla recognizes the style sheet has been inserted, but no styles seem
to have been loaded/applied.
[color=blue]
> var link;
> if (document.creat eElement && (link = document.create Element('link') ))
> {
> link.href = 'whatever.css';
> link.rel = 'stylesheet';
> link.type = 'text/css';
> var head = document.getEle mentsByTagName( 'head')[0];
> if (head) {
> head.appendChil d(link);
> }
> }
>[/color]

[Martin Honnen]

Re: CSS loading using JS



Brett Foster wrote:
[color=blue]
> Martin Honnen wrote:
>[/color]
[color=blue][color=green]
>> Create a <link> element with the desired properties and insert it into
>> the head of the document e.g.[/color]
>
>
> Mozilla recognizes the style sheet has been inserted, but no styles seem
> to have been loaded/applied.
>[color=green]
>> var link;
>> if (document.creat eElement && (link = document.create Element('link') ))
>> {
>> link.href = 'whatever.css';
>> link.rel = 'stylesheet';
>> link.type = 'text/css';
>> var head = document.getEle mentsByTagName( 'head')[0];
>> if (head) {
>> head.appendChil d(link);
>> }
>> }[/color][/color]

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/