FontSize ist nicht variabel (JS- oder CSS-Fehler?)

Hello World!

Ich versuche vergeblich mit dem folgenden Skript auf einer Seite per Klick auf ein Plus- bzw. Minuszeichen die Schriftgröße zu vergrößern bzw. zu verkleinern, allerdings tut sich gar nichts. JS ist selbstverständlich aktiviert und ich habe es auch mit verschiedenen Browsern versucht.

Mein JS-File hat folgenden Code:

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";  
}

Eingebunden wird es mit:

<script language="text/javascript" src="/js/fontsize.js"></script>  

Die Verlinkung erfolgt durch:

<a href="javascript:resizeText(-1);">A-</a>   
<a href="javascript:resizeText(0);">A</a>  
<a href="javascript:resizeText(1);">A+</a>  

Ich habe auch versucht, ein Skript aus dem Internet zu verwenden (Link), allerdings ging es auch damit nicht.

Sieht jemand (m)einen Fehler?

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 204401

Url: https://administrator.de/contentid/204401

Ausgedruckt am: 20.11.2024 um 05:11 Uhr

4 Kommentare

Neuester Kommentar

Existiert denn die CSS Eigenschaft font-size im body deiner CSS Konfiguration ?
... wenn nicht setze diese mal auf einen Default wert und versuche es nochmal.

body { font-size: 1em; }

nützlich bei so was ist die Erweiterung FireBug und die JS Befehle:

console.log( 'Lognachticht, JS Objekt, ...' );  
/* zB. */
console.log ( 'fontSize: '+document.body.style.fontSize );  

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <script>
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";  
}            
        </script>
    </head>
    <body style="font-size:1em;">  
        <div>TODO write content</div>
<a href="javascript:resizeText(-0.5);">A-</a>   
<a href="javascript:resizeText(0);">A</a>  
<a href="javascript:resizeText(0.5);">A+</a>          
    </body>
</html>

... geht wunderbar.