is it possible to change a whole css style sheet in the document when its running, if so does nibody have a script for it. or if there is no possible way to do this with css, is there any other methods or diffrent langs. that can change the pages theeme while its running?Hi there dera,
This will do what you require....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>stylesheet changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link id="foo"rel="stylesheet" type ="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style_1.css"/>
</head>
<body>
<div>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_1.css' ;return false">style one</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_2.css';return false ">style two</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_3.css';return false">style three</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_4.css';return false ">style four</button>
</div>
<h3>Your Contents</h3>
<div> </div>
</body>
</html>
coothead
This will do what you require....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>stylesheet changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link id="foo"rel="stylesheet" type ="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style_1.css"/>
</head>
<body>
<div>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_1.css' ;return false">style one</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_2.css';return false ">style two</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_3.css';return false">style three</button>
<button onclick="document.getElementById('foo').href='http://www.webdeveloper.com/forum/archive/index.php/style_4.css';return false ">style four</button>
</div>
<h3>Your Contents</h3>
<div> </div>
</body>
</html>
coothead