?
Solved

Changing font size on click

Posted on 2004-08-26
5
Medium Priority
?
1,315 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 1000 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 500 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 500 total points
ID: 11907645
Try this:
<span onClick="this.style.fontSize='25px'">Test</span>

Hope this helps!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

864 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