3 Stufen Schriftgröße wählen

Das Problem, dass die Dinge, die du bei Google evtl. gefunden hast, nicht wie gewünscht funktionieren, dürfte darin liegen:

Ich gehe mal davon aus, dass sie die fontSize des body-Elementes ändern.
Diese Änderung wirkt sich auf alle Elemente aus, für die du keine Schriftgrösse definiert hast....denn diese erben ihre Formatierung vom Elternelement.

Anstatt nun für alle Elemente, welche nicht geändert werden sollen, eine Schriftgrösse zu definieren, könntest du vorgehen, indem du für alles das, was du als "Fliesstext" ansiehst, einen eigenen Selektor verwendest(dies kann bspw. ein span sein, welches du ausschliesslich dafür verwendest, oder ein Klassenname).

Diesen Selektor kannst du dann mit JS manipulieren, der Rest bleibt davon unbehelligt.

Um das zu bewerkstelligen, musst du auf das styleSheets-Objekt zugreifen, hier mal ein Beispiel
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-02-19" />
<title>Test</title>
<script type="text/javascript">
<!--
function modifyCssRule(stylesheet,rule,attr,value)
{  
  document.styleSheets[stylesheet][((document.all)?'rules':'cssRules')][rule]['style'][attr]
                                                                                      =value;
}


//-->
</script>
<style type="text/css">
<!--
body{font-size:12px;}
.fliesstext{font-size:12px;color:red}
-->
</style>
</head>
<body>
<center>
  <b onclick="modifyCssRule(0,1,'fontSize','12px');">12px</b> -
  <b onclick="modifyCssRule(0,1,'fontSize','18px');">18px</b> -
  <b onclick="modifyCssRule(0,1,'fontSize','26px');">26px</b>
</center>
<h1>
  Ich bin eine Überschrift und bleibe immer gleich
</h1>
<p>Ich bin eine Absatz und bleibe auch gleich. 
  <span class="fliesstext">Ich bin ein Fliesstext, mich kann man ändern. 
    <b>
      Ich bin etwas fettes im Fliesstext, und werde auch geändert
    </b>
  </span> 
  Ich bleibe wie ich bin
</p>
Mit mir passiert auch nicht.
</body>
</html>
 
Zuletzt bearbeitet:
Ihr seid echt super. Wirkliche Profis!

@Maik
Ja das stimmt, ich bin aber nicht ganz untätig und habe mich sehr viel mit MySQL in letzter Zeit beschäfftigt. Ich werde mir heute ein Buch zu Javascript bestellen, bei Amazon habe ich schon ganz gute gesehen. Ich werde aber trotzdem hin und wieder eine Frage stellen, sieht man ja in den anderen Bereichen, da hast du mir ja auch schon sehr viel geholfen. Danke ;-)

@Dr Dau
Das liegt aber auch daran, das sie nicht nur die Schrift vergrößern, sondern auch das Layout. Und bei "groß" gibt es ein neues Headerbild, welches aber nicht existiert. Deswegen sieht es sehr zerschossen aus. Die Methode gefällt mir aber.

@Sven Mintel
Das ist echt ein super "Schnippsel". Das hat mir jetzt sehr weitergeholfen und ich glaube es auch verstanden zu haben. Muss mir noch die Javascript Funktionen genauer ansehen, aber laufen tut es sehr gut bei mir. Klasse, ich bin beeindruckt.:)
 

Neue Beiträge

Zurück