Docstoc

javascript

Document Sample
javascript Powered By Docstoc
					Javascript Change Font Size
<p id=hey>This is my fabulous text that will change.</p>
<a
onMouseover=document.getElementById('hey').style.fontSize='10'>
Make it Tiny!</a> ----
<a
onMouseover=document.getElementById('hey').style.fontSize='24'>
Make it HUGE!!!</a>


-In our HTML paragraph tag, we name
our id attribute hey because we like the name.
-We create two links that use the Javascript onMouseover event
handler.
---After the equals sign:
-----document - this page
-----getElementById - Javascript's built-in method that will
get elements from our page.
-----In the parenthesis - we state that we will be working on
thehey element of our page.
-----We then call the Javascript style object.
-----We then call the fontSize property of the style object.
-----We say make it 10 pixels for the first sentence and 24
pixels for the second.

Now, to make fonts get bigger or smaller, we'll write a
function. But first, we'll make a few changes to our text in
our anchortags using onClick to call our new function.

<p id=hey>This is my fabulous text that will change.</p>

<a onClick=funTime("grow")> GROW!</a> ----
<a onClick=funTime()> Make it Smaller!</a>

<script type="text/javascript">
var dsi=16;
function funTime(p) {
if (p == "grow") {
dsi++;
}
else {
dsi--;
}
document.getElementById('hey').style.fontSize=dsi;
}
</script>

Our first two sections are pretty much the same except we call
our new function with an onClick event handler.
---We pass the value of "grow" if the GROW text is clicked.
The script:
-We name a var dsi and give it value of 16.
-We name our function funTime and say whatever is passed to it
from our page will be stored in a variable we name p.
-We say if p equals grow, increment (add one to) our
variabledsi.
-Or else if p is not equal to grow, decrement (subtract one
from) our variable dsi.

Then we use our same snippet of code from earlier, just
changing the part after the equals sign to have the value of
our variabledsi. dsi starts at 16 and gets bigger or smaller
depending on which text a user clicks.


Here's my Javascript Change Fonts article, which has even more
fun things to do with fonts.

Free Copy and Paste Javascript Code:
<script type="text/javascript">
<!--
var dsi=16;
function funTime(p) {
if (p == "grow") {
dsi++;
}
else {
dsi--;
}
document.getElementById('hey').style.fontSize=dsi;
}
-->
</script>

<table height=50><tr><td valign=top height=50>
<p id=hey>This is my fabulous text that will change.</p>
</td></tr></table>
<a onClick=funTime("grow")> GROW!</a> ----
<a onClick=funTime()> Make it Smaller!</a>

<br><br><br>
<a id=bop>Hello</a>
<a
onMouseover=document.getElementById('bop').style.fontSize='10'>
Make it Tiny!</a> ----
<a
onMouseover=document.getElementById('bop').style.fontSize='24'>
Make it HUGE!!!</a>


For fun, I just wrapped this article in a <div> tag and gave it
my id name. You could do the same in the body tag. SO...
GROW this page! ---- Make it Smaller!

				
DOCUMENT INFO
Shared By:
Categories:
Tags: javascript
Stats:
views:4
posted:4/16/2013
language:
pages:2
Description: javascript