Solved

Changing font size on click

Posted on 2004-08-26
5
1,310 Views
Last Modified: 2013-12-03
How do I change the font styles of a <span id="blah"></span>? I've seen it done somewhere else before, but forgot the code.
0
Comment
Question by:drakkarnoir
5 Comments
 
LVL 19

Accepted Solution

by:
dakyd earned 250 total points
ID: 11906251
Do you want something like the following?  Hope that helps.

<html>
<head>
<script type="text/javascript">
function changeFont()
{
  var theSizeStr = document.getElementById("size").value;
  var theSize = parseInt(theSizeStr)/100;
  document.getElementById("blah").style.fontSize = theSize + "em";
}
</script>
</head>

<body>
Size to change to (in %): <input type="text" id="size" value="100" /><br />
<a href="#" onclick="changeFont()">Change Font Size</a><br />
<span id="blah">
Some text goes here.  It will grow/shrink depending on what you enter above.
</span>
</body>
</html>
0
 
LVL 15

Assisted Solution

by:justinbillig
justinbillig earned 125 total points
ID: 11907260
@dakyd

if you change this line
<a href="#" onclick="changeFont()">Change Font Size</a><br />
to this
<a href="javascript:void( 0 );" onclick="changeFont()">Change Font Size</a><br />
the browser wont scroll to the top of the page, the only thing i dont like is that it will dispaly javascript:void( 0 ) in the window status.
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11907420
Justin,
Yeah, I know, but it's both a personal preference and force of habit.  I really dislike the "javascript: void(0)" showing up in the window status.  For small examples like this, I don't care about the scrolling, since the whole page is visible anyway.
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11907454
you can get rid of the scolling back to the top of the page by returning false

<a href="#" onclick="changeFont();return false;">Change Font Size</a><br />
0
 
LVL 1

Assisted Solution

by:LTrain127
LTrain127 earned 125 total points
ID: 11907645
Try this:
<span onClick="this.style.fontSize='25px'">Test</span>

Hope this helps!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question