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
