Solved

Changing font size on click

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

747 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

10 Experts available now in Live!

Get 1:1 Help Now