jnag wrote:
I have a website with various font options (small to
large) buttons that the user can click on the banner,
which runs through the site.
Site contains both static and dynamic content. I have
an onclick() event on the buttons. But, I am not sure
where to put the javascript function that will change
the stylesheet accordingly and how to write this piece
of code.
One way is to use a camelcase:
<script type="text/javascript">
function f(n) {
document.getElementById('C').style.fontSize = n
}
</script>
<div id="C">Text</div>
<input type="button" onClick="f('18px')" value="18px">
<input type="button" onClick="f('200%')" value="200%">
<input type="button" onClick="f('36pt')" value="36pt">
<input type="button" onClick="f('2cm')" value="2cm">
<input type="button" onClick="f('8em')" value="8em">
<input type="button" onClick="f('2.5in')" value="2.5in">
<input type="button" onClick="f('18pc')" value="18pc">
Variant, changing CSS-classes:
<head>
<title>My test page</title>
<style type="text/css">
.one { font-size: 22px }
.two { font-size: 6em }
</style>
</head>
<body>
<div id="C">Text</div>
<input type="button" value="22px"
onClick="document.getElementById('C').className='o ne'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='t wo'">
</body>
Hope this helps,
--
Bart
