Schriftgröße mit JavaScript ändern[IE|M|O|S|G]

von: P. Rettinghaus

Schriftgröße der Webseite mit JavaScript ändern.

JavaScript | 864 Bytes | 41 Zeilen | 16.04.2011

Quelltext: „Schriftgröße mit JavaScript ändern”


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Schriftgröße ändern</title>

<style type="text/css">
body {
 font-size: 12px;
 font-family: Verdana, Arial, Sans-Serif;
}
</style>

<script type='text/javascript'>
function setFontSize(size) {
 var body = document.getElementsByTagName('body');
 for(var i = 0; i < body.length; i++) {
  if (body[i].style.fontSize) {
   var s = parseInt(body[i].style.fontSize.replace("%",""));
  } 
  else {
   var s = size;
  }
  body[i].style.fontSize = size + "%";
 }
}
</script>

 </head>
<body>

<p>
Schriftgröße ändern
<a style="font-size: 12px;" href="javascript:setFontSize('90');">A</a>
<a style="font-size: 14px;" href="javascript:setFontSize('100');">A</a>
<a style="font-size: 16px;" href="javascript:setFontSize('110');">A</a> 
</p>

<p> Lorem ipsum dolor ...</p>

</body>
</html>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 2 » aufmachen Sebastian: Danke. Jetzt fehlt nur noch die Speicherung im Cookie und das dieser, falls vorhanden, ausgelesen wird und die Schriftgröße dann auf einer neuen Seite (nach Linkklick) anpasst. Aber das nur als "Verbesserungstipp" Werner: So etwas gibt es hier unter » Das Design per Hyperlink verändern Torsten: JavaScript: <script type="text/javascript"> function fontPlus() { var style, newstyle; style = readCookie("style"); if (style == 'Large') { newstyle = 'XLarge'; } else if (style == 'XLarge') { newstyle = "XLarge"; } else if (style == 'Small') { newstyle = ''; } else if (style == '') { newstyle = 'Large'; } else if (style == 'XSmall') { newstyle = 'Small'; } else { newstyle = 'Large'; } if (style != newstyle) { setStyle(newstyle); }} function fontMinus() { var style, newstyle; style = readCookie("style"); if (style == 'Large') { newstyle = ''; } else if (style == 'XLarge') { newstyle = "Large"; } else if (style == 'Small') { newstyle = 'XSmall'; } else if (style == 'XSmall') { newstyle = 'XSmall'; } else { newstyle = 'Small'; } if (style != newstyle) { setStyle(newstyle); }} </script> CSS: Fünf Dateien: normal.css, large.css, xlarge.css, small.css und xsmall.css. Beispiel normal.css:`@CHARSET "UTF-8";body {font-size: 1em;}` Die anderen CSS-Dateien mit kleineren bzw. größeren Schriftangaben. Alle fünf natürlich im Header einbinden.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!