Change style sheet via document.getElementById 1

gs99 · Sep 12, 2007

Trying to have html file that enables user to change font styles, starting with headers.
Using Internet Explorer 7.

Html file has external CSS and Javascript files and a form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/REC-html40/loose.dtd">

<html lang="en">
<head>
<link id="styleHeaders" rel="stylesheet" type="text/css" href="styles/styleHeadersRoman.css">
<script type="text/javascript" src="scripts/style.js"></script>
<title>Set styles for web page</title>
</head>

<body>
<h3>Set styles for web page. This is how "headers" will appear</h3>
<form name="formOne" onsubmit="setStyle()">
Header font type
<select name="headers">
<option value="arial">Arial, sans-serif (default)
<option value="roman">Roman, serif
<option value="courier" >Courier, monospace
</select>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Javascript file has this:
alert("1 Start script");
function setStyle()
{
setHeadersStyle();
}

function setHeadersStyle()
{
var setHeaders="styles/styleHeaders"; // left side of href value
switch (document.formOne.headers.value)
{
case "arial":
setHeaders =setHeaders + "Arial.css"; // right side of href value
break;
case "roman":
setHeaders =setHeaders + "Roman.css"; // right side of href value
break;
case "courier":
setHeaders =setHeaders + "Courier.css"; // right side of href value
break;
}
document.getElementById('styleHeaders').href = setHeaders;
alert("2_setHeaders value: "+setHeaders);
}

What happens:
See Alert "1_Start script"
Click OK.
See HTML page with headers in default Roman font, as specified in styles/styleHeadersRoman.css.
Click Submit.
H3 header now displays in Arial font.
See Alert "2_setHeaders value: styles/styleHeadersArial.css"
Click OK.
See Alert "1_Start script"
Click OK.
See HTML page with headers in default Roman font again.

Question- Why doesn't the Arial font stay?

BabyJeffy · Sep 12, 2007

Try adding this to your form declaration (to prevent the form being submitted):

Code:

<form name="formOne" onsubmit="setStyle()[!];return false;[/!]">

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

gs99 · Sep 12, 2007

Thanks Jeff

I assume "return false" needs to be used always when JavaScript processes a form?

This is a new topic for me. I understand "return true" executes the default action after JS code completes; "return false" skips the default action.

In this case, the default action is to "process the Form" via normal html methods, requiring a webpage to be loaded (the default being same webpage). When JS processes the Form, this is not normally desired. Altho there may be situations where JS code is run and you also want the html method to run?

Thanks again!

BabyJeffy · Sep 12, 2007

You don't have to use return false for all forms that are processed by javascript - only if you don't want the form to actually submit (which loads the page specified in the action attribute (or reloads the page if this attribute is missing or empty).

You may also see this technique used on anchors:

Code:

<a href="[URL unfurl="true"]http://www.google.com"[/URL] onclick="alert('Boo!');return false">Google</a>

In the example above, the javascript in the onclick is run, with the last command being to return false - which prevents the anchor from visiting Google. This technique is the cornerstone of developing for accessibility - if you have javascript enabled then you get "extra" or "richer" features than the non-javascript user... but even without javascript you get the basic functionality (in this case, the link works if you don't have Javascript enabled).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change style sheet via document.getElementById 1

gs99

Programmer

BabyJeffy

Programmer

gs99

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor