Solved

Changing font size on click

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

730 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