Solved

Changing font size on click

Posted on 2004-08-26
5
1,309 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now