change style sheets

screamer2k · #1 Aug 6th, 2004, 10:01

hi ive been given this javascript code to be put into an html document which enables me to change between external stylesheets. i would also like to change between the original html page too. If possible an internal javascript code.
Heres the Xhtml code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<link type="text/css" rel="stylesheet" href="Q2sheet1.css"/>
<title>Question 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 code"/>
</head>
<body>
<h1>styles.html</h1>
<h2>Harry Potter...</h2>

<big>H</big>e-Who-Must-Not-Be-Named has been named.
Ralph Fiennes, who played memorable evil guys in "Red Dragon" and "Schindler's List," has signed on to portray the wicked warlock Voldemort in the next "Harry Potter" movie, Warner Bros. announced Wednesday. Voldemort is so bad that the magical characters in author J.K.
Rowling's stories do their best not to speak his name aloud. XP</p>
</body>
</html>

And heres the Javascript code ive been given to crack !:

function changeStyleSheet(url) {
//find <link> tag with attribute rel="stylesheet"
var links = document.getElementsByTagName('link') ;
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute('rel') == 'stylesheet') {
var theLink = links[i] ;
break;
}
}
//If we found a stylesheet <link> then change it !
if (theLink) {
//replace its href attribute with the new URL
theLink.setAttribute('href', url) ;
}
}

PLEASE IF ANYONE CAN HELP ILL APPRECIATE IT.

Smokie · #2 Aug 6th, 2004, 10:30

please explain your question further... you want the chosen CSS to persist accross pages?

screamer2k · #3 Aug 6th, 2004, 10:33

no, i just want the page to have three buttons using the javascript code given.. so that one page can switch between two stylesheets i have and one original html page. All from the main page.
thanks!

Smokie · #4 Aug 6th, 2004, 10:43

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script language="javascript">
function changeStyleSheet(url) {
//find <link> tag with attribute rel="stylesheet"
var links = document.getElementsByTagName('link') ;
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute('rel') == 'stylesheet') {
var theLink = links[i] ;
break;
}
}
//If we found a stylesheet <link> then change it !
if (theLink) {
//replace its href attribute with the new URL
theLink.setAttribute('href', url) ;
}
}

</script>
<link type="text/css" rel="stylesheet" href="Q2sheet1.css"/>
<title>Question 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 code"/>
</head>
<body>
<form>
<input type=button value="normal" onClick="changeStyleSheet('Q2sheet1.css')"> <input type=button value="type 1" onClick="changeStyleSheet('Q2sheet2.css')"> <input type=button value="type 2" onClick="changeStyleSheet('Q2sheet3.css')">
</form>
<h1>styles.html</h1>
<h2>Harry Potter...</h2>


<big>H</big>e-Who-Must-Not-Be-Named has been named. 
Ralph Fiennes, who played memorable evil guys in "Red Dragon" and "Schindler's List," has signed on to portray the wicked warlock Voldemort in the next "Harry Potter" movie, Warner Bros. announced Wednesday. Voldemort is so bad that the magical characters in author J.K. 
Rowling's stories do their best not to speak his name aloud. XP</p>
</body>
</html>

benbacardi · #5 Aug 6th, 2004, 10:44

i dont understand... so effectivly u want to switch between 3 different styles?

screamer2k · #6 Aug 6th, 2004, 11:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<link type="text/css" rel="stylesheet" href="Q2sheet1.css"/>
<title>Question 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 code"/>
</head>
<body>
<script language="javascript" type="text/javascript">
function changeStyleSheet(url) {
//find <link> tag with attribute rel="stylesheet"
var links = document.getElementsByTagName('link') ;
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute('rel') == 'stylesheet') {
var theLink = links[i] ;
break;
}
}
//If we found a stylesheet <link> then change it !
if (theLink) {
//replace its href attribute with the new URL
theLink.setAttribute('href', url) ;
}
}

</script>
<link type="text/css" rel="stylesheet" href="Q2sheet1.css"/>
<title>Question 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 code"/>

<form>
<input type=button value="Q2sheet1" onClick="changeStyleSheet('Q2sheet1.css')"> <input type=button value="Q2sheet2" onClick="changeStyleSheet('Q2sheet2.css')">
</form>

<h1>Main Title Question 2.html</h1>
<h2>Microsoft etc</h2>

<big>M</big>icrosoft Corp. is close to releasing the biggest update ever
for the Windows operating system, aiming to plug holes that have
led to massive security problems for computer users the world over.</p>

<h2>Harry Potter...</h2>

<big>H</big>e-Who-Must-Not-Be-Named has been named.
Ralph Fiennes, who played memorable evil guys in "Red Dragon" and "Schindler's List," has signed on to portray the wicked warlock Voldemort in the next "Harry Potter" movie, Warner Bros. announced Wednesday. Voldemort is so bad that the magical characters in author J.K.
Rowling's stories do their best not to speak his name aloud. XP</p>

</p>

</body>
</html>

HI Now this code doesnt validate and wen i switch to stylsheet2 it doesnt make the background go silver like it did before! its on "body" tag on the css....HELP!!!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Style sheets	Oak	Web Page Design	4	Mar 3rd, 2008 16:49
switching between style sheets	cwjones	Web Page Design	4	Jul 4th, 2007 17:06
Problems with external style sheets	ronb	Web Page Design	7	May 16th, 2007 19:18
CSS Style Sheets	ronb	Starting Out	3	May 10th, 2007 13:02
*Help Needed accessing external Style Sheets*	shawn2000	Flash & Multimedia Forum	1	Nov 15th, 2006 22:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
change style sheets