How to change stylesheet using Javascript?


T

typingcat

Hello.
I know it is possible to change separate elements' style by changing

[element].style=[another style];

But is it possible to set the entire page's stylesheet?
For example,
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>

Can I change "style1.css" to "style2.css" using Javascript and make the
page be changed dynamically?
 
Ad

Advertisements

S

Stuart

Hello.
I know it is possible to change separate elements' style by changing

[element].style=[another style];

But is it possible to set the entire page's stylesheet?
For example,
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>

Can I change "style1.css" to "style2.css" using Javascript and make the
page be changed dynamically?

It is possible - something like the following works :

.....

<link rel="stylesheet" href="style1.css" id="stylesheet">

<script type="text/javascript">

function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}

</script>

.....

<input type="button" onclick="changeStyle();"/>

.....


Works in both IE6 & FF - not sure if there's a better way, though?
 
J

Jedi Fans

Stuart said:
It is possible - something like the following works :
<link rel="stylesheet" href="style1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}
</script>
<input type="button" onclick="changeStyle();"/>
Works in both IE6 & FF - not sure if there's a better way, though?

http://www.alistapart.com/articles/alternate/
 
Ad

Advertisements

?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Stuart a écrit :
Hello.
I know it is possible to change separate elements' style by changing

[element].style=[another style];

But is it possible to set the entire page's stylesheet?
For example,
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>

Can I change "style1.css" to "style2.css" using Javascript and make the
page be changed dynamically?

It is possible - something like the following works :

....

<link rel="stylesheet" href="style1.css" id="stylesheet">

link does not take an id attribute value.
<script type="text/javascript">

function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}

<link rel="stylesheet" type="text/css" href="default.css" title="Default">

<link rel="alternate stylesheet" type="text/css" href="Foo.css"
title="Foo">

(...)

function changeActiveStyleSheet(previous, new)
{
if(document.styleSheets)
{
for (var StyleSheetIterator = 0; StyleSheetIterator <
document.styleSheets.length; StyleSheetIterator++)
{
if(document.styleSheets[StyleSheetIterator].title == previous)
{
document.styleSheets[StyleSheetIterator].disabled = true;
};
if(document.styleSheets[StyleSheetIterator].title == new)
{
document.styleSheets[StyleSheetIterator].disabled = false;
};
};
};
}

/*
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet
*/
(...)

Default stylesheet: <input type="radio" ...
onclick="changeActiveStyleSheet('Foo', 'Default');">

Foo stylesheet: <input type="radio" ...
onclick="changeActiveStyleSheet('Default', 'Foo');">

Not tested. I'm sure the code could be improved but the general design
is correct. Opera 7+ will not support document.styleSheets collection
but there is an UI for choosing stylesheets.

Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top