By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,692 Members | 1,498 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,692 IT Pros & Developers. It's quick & easy.

CSS loading using JS

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


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/
Jul 23 '05 #2

P: n/a
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.
Jul 23 '05 #3

P: n/a


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/
Jul 23 '05 #4

P: n/a
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);
}
}

Jul 23 '05 #5

P: n/a


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/
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.