Forum Moderators: open
Could someone tell me why the following doesnt work. IE reports ""jstest" undefinded" and Firefox does nothing.
I have 2 external style sheets and i am attempting to use JS to change the href attribute of the link tag to point to the other .css file.
Thanks.
<html>
<head>
<title>DOM Scripting Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="stylelink" rel="stylesheet" type="text/css" href="jstest.css" media="screen" />
<script type="text/javascript">
function switchsheet(whichsheet){
mysheet=whichsheet;
document.getElementById("stylelink").setAttribute("href",mysheet+".css");
}
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum augue at wisi. Donec nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque venenatis vulputate elit. Nulla facilisi. Nunc mattis, tortor a porta rhoncus, metus massa nonummy orci, eu gravida nibh nunc a wisi. Nunc mollis fringilla enim. Nullam imperdiet massa ac elit. Vivamus semper risus ut nunc. Fusce aliquam interdum nisl. Pellentesque gravida eros in felis. Duis sit amet lectus eu nunc pharetra iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a href="#" onclick="switchsheet(jstest2)">click here for style sheet 2</a>
<br />
<a href="#" onclick="switchsheet(jstest)">click here for style sheet 1</a>
</body>
</html>
When passing a parameter to a function it should be quoted like so:
<a href="javascript:switchsheet('jstest2')">click here for style sheet 2</a>
<br />
<a href="javascript:switchsheet('jstest')">click here for style sheet 1</a>
HTH,
-George
edit: removed onclick function and replaced href with call to javascript
Do you have a simple explanation of the difference between DHTML and DOM Scripting?
-George
Going back to my original query. Is it better to point the href to the javascript instead of using an event or is it just personal preference?
-George
I use this to increase the font size for the page, so that the site becomes parcially sited freindly.
In the head:
<link rel="stylesheet" type="text/css" href="standard.css" title="standard" />
<link rel="alternate stylesheet" type="text/css" href="large.css" title="large" />
In body:
<a style='cursor:hand' onclick='parent.header.setActiveStyleSheet("large");parent.main.focus()'><img src="images/fontsize.gif" border="0"></a>
I was using this in a Frameset, button refocuses the action to the main part of the page.
This is a one way action, as that was all I needed at the time, but i have seen other scripts which you can either pick the style sheet, or switch between the style sheets.
Google search 'HTML CSS Style sheet switch' and trawl through the results.
