Click here to Skip to main content
14,388,831 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi everyone, I've got a problem with changing the font-size. I've tried a few methods like this :

function resizeText(multiplier) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
but it didn't work because I'm working on a website that's been made by professionnals and they didn't use em but the values xx-small, small, large...

This works :

function resizeText(multiplier) {
if (document.body.style.fontSize == "") {

document.body.style.fontSize = "small";
}
}

So I started doing strange stuff like this :

function resizeText(multiplier){

var tab = ["xx-small", "x-small", "small", "medium", "large"," x-large", "xx-large"];

if (document.body.style.fontSize == "") {

switch(tab){
case 'xx-small':
document.body.style.fontSize = "x-small";
break;
case 'x-small':
document.body.style.fontSize = "small";
break;

and so on...

}
}

The only thing that worked in my switch was the default value I put to the font-size.

Then I don't think that putting an array inside a switch is a good idea, I've been thinking about looping or using if/else but somehow I just can't find the answer. I keep doing strange stuff. So if someone could guide me in the right direction, I'dd be gratefull.

Now I've done this, doesn't work either :

<script type="text/javascript">// <![CDATA[

function resizeText(multiplier) {
var tab = ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"];

if (document.body.style.fontSize === tab[0]) {

document.body.style.fontSize = tab[1];
}
else if (document.body.style.fontSize === tab[1])
{
document.body.style.fontSize = tab[2];
}
else if (document.body.style.fontSize === tab[2])
{
document.body.style.fontSize = tab[3];
}
else if (document.body.style.fontSize === tab[3])
{
document.body.style.fontSize = tab[4];
}
else if (document.body.style.fontSize === tab[4])
{
document.body.style.fontSize = tab[5];
}
else if (document.body.style.fontSize === tab[5])
{
document.body.style.fontSize = tab[6];
}
}
// </script>

<button onclick="resizeText(1)" >+</button>

Posted
Updated 5-Jun-15 0:56am
v6
Rate this:
Please Sign up or sign in to vote.

Solution 1

you can use jQuery:

$("body").css("font-size")

here is an example

http://codepen.io/anon/pen/WvjNjN[^]
   
Comments
Member 11492079 5-Jun-15 8:28am
   
I haven't learned jQuery yet, but what I'm trying to achieve is to create 2 buttons A+ and A- so that people just have to click on it so they can read at the font-size they want. The website is for elder people, I'm trying to imagine myself in their position :) .
Rate this:
Please Sign up or sign in to vote.

Solution 2

I've found it myself but thanks anyway for those who tried to help :) :

<script type="text/javascript">// <![CDATA[
var tab = ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"];

document.body.style.fontSize = tab[0];
function resizeText(multiplier) {

 if (document.body.style.fontSize == tab[0]) {

document.body.style.fontSize = tab[1];
}
else if (document.body.style.fontSize == tab[1])
{
document.body.style.fontSize = tab[2];
}
else if (document.body.style.fontSize == tab[2])
{
document.body.style.fontSize = tab[3];
}
else if (document.body.style.fontSize == tab[3])
{
document.body.style.fontSize = tab[4];
}
else if (document.body.style.fontSize == tab[4])
{
document.body.style.fontSize = tab[5];
}
else if (document.body.style.fontSize == tab[5])
{
document.body.style.fontSize = tab[6];
}
}
// ]]></script><p><button onclick="resizeText(1)">+</button> 
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100