Change font size on my website with Javascript

Question

This is my website http://natjecanje.interes.hr/

I want to have big A and small A and by pressing one of this "A" people can change all letters size on website, all elements need change font size, Thank you! :)

PS I did google search, but i didn't find what i was looking for.

Answer 1

You need to use 2 differents CCS Style, a little JS script

Please Find below Javascript :

 function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } if (navigator.appName == "Microsoft Internet Explorer") { window.resizeBy(0,-10); window.resizeBy(0,+10); } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); 

You can save this script in a fil named : changement_css.js

Now you need a first CCS style whit regular font-size, and another one with a different font size, and include it in your HTML file.

<!--Default CSS-->

<link rel="stylesheet" type="text/css" href="normal.css" title="normal">

<!--Alternate CSS-->

<link rel="alternate stylesheet" type="text/css" href="grand.css" title="grand">

Copy those line instead of your regular CSS Then, use this code to call your JS after your CSS link :

<script language="JavaScript" src="changement_css.js" type="text/javascript"></script>

Then, you need a button to change font-size :

<ul>

<li><a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a></li>

<li><a href="#" onclick="setActiveStyleSheet('grand'); return false;">Grand</a></li>

</ul>

I hope this could help you.

This message is translate from : http://forum.alsacreations.com/topic-6-11551-1-Boutons-AugmenterDiminuer-la-Taille-du-Texte-.html

Answer 2

function promjenaVelicineFonta(inc) 
{ 
var p = document.getElementsByTagName('p'); 
for(n=0; n<p.length; n++) { 
if(p[n].style.fontSize) { 
var size = parseInt(p[n].style.fontSize.replace("px", "")); 
} else { 
var size = 14; 
} 
p[n].style.fontSize = size+inc + 'px'; 
} 

var span = document.getElementsByTagName('span'); 
for(n=0; n<span.length; n++) { 
if(span[n].style.fontSize) { 
var size = parseInt(span[n].style.fontSize.replace("px", "")); 
} else { 
var size = 14; 
} 
span[n].style.fontSize = size+inc + 'px'; 
} 
}

I found a solution, here it is.

Answer 3

Do you mean font size (ie 10pt, 12pt etc) or font capitalisation (ie a or A)? I think you mean capitalisation based on the theme of your question (because you said 'big' and 'small')?

You can control capitalisation with CSS via the 'text-transform' property ( http://www.w3schools.com/cssref/pr_text_text-transform.asp ).

You can use JavaScript to add remove CSS classes which is outlined in this thread: Change an element's class with JavaScript

Using this approach you could add remove CSS classes which use text-transform to change the capitalisation of the font.