---
title: "CSS - Umschaltung"
url: "https://www.typo3.net/d/106217-css-umschaltung"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2011-07-09"
last_reply: "2011-07-12"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS - Umschaltung

Allgemein · 8 Antworten · gestartet 2011-07-09

## Eröffnungsbeitrag

**typo3_hp** · 2011-07-09 · [Beitrag #1](https://www.typo3.net/d/106217-css-umschaltung/1)

Hallo,

ich möchte oben in meinem Layout die Möglichkeit die Schriftart zu vergrößern integrieren.

Also 3 mal ein A in unterschiedlichen Größen.
Standardmäßig soll das mittlere aktiv sein, wenn man auf das links davon (kleiner) oder rechts davon (größer) klickt, sollen diverse Schriftarten größer angezeigt werden.

Wie würdet Ihr das machen?

Oder kann ich durch einen Klick auch browserunabhänig die Skalierung des Browsers ansprechen (firefox: Strg und +, Strg und -, Strg und 0)

Danke und Grüße

## Antworten

### [#2](https://www.typo3.net/d/106217-css-umschaltung/2) · king.​darki · 2011-07-11

Hallo,

> **typo3_hp schrieb:**
>
> Wie würdet Ihr das machen?

Ich würde erstmal alle Schriftgrößen in em-Angaben im CSS machen und dann per Javascript den "font-size" vom body-Tag ändern. Dann müssten sich alle davon abhängigen Schriftgrößen auch anpassen...

Grüße Patrick

### [#3](https://www.typo3.net/d/106217-css-umschaltung/3) · typo3_hp · 2011-07-11

Hallo!

Die ANpassung der Schriftgrößen in EM ist mir klar.

Aber wie mach ich das Script, hast Du mir ein Beispielcode?

Danke und Grüße

### [#4](https://www.typo3.net/d/106217-css-umschaltung/4) · king.​darki · 2011-07-11

> **typo3_hp schrieb:**
>
> Aber wie mach ich das Script, hast Du mir ein Beispielcode?

Benutzt du jQuery oder ein anderes JS-Framework?

Wenn nein, dann gehts in diese Richtung (ungetestet):

```html
<script type="text/javascript">
function setSizeUp () {
  document.getElementsByTagName('body')[i].style.fontSize = "120%";
}
function setSizeDown () {
  document.getElementsByTagName('body')[i].style.fontSize = "80%";
}
</script>
<a href="javascript:setSizeUp()">Mach groß!</a>
<a href="javascript:setSizeDown()">Mach klein!</a>
```

Grüße Patrick

### [#5](https://www.typo3.net/d/106217-css-umschaltung/5) · typo3_hp · 2011-07-11

Hallo!

Dankeschön!

Ich bekomme die Meldung im Javadebugger
i is not defined

Was stimmt da noch nicht?

Grüße und Danke

### [#6](https://www.typo3.net/d/106217-css-umschaltung/6) · typo3_hp · 2011-07-12

??
Danke

### [#7](https://www.typo3.net/d/106217-css-umschaltung/7) · aimcom · 2011-07-12

Versuch mal, das [​i] im Code von king.darki durch eine *[0]* zu ersetzen, dann sollte es eigentlich gehen.

### [#8](https://www.typo3.net/d/106217-css-umschaltung/8) · king.​darki · 2011-07-12

> **aimcom schrieb:**
>
> Versuch mal, das [​i] im Code von king.darki durch eine *[0]* zu ersetzen, dann sollte es eigentlich gehen.

Habs mal kurz selber getestet, so funktionierts:

```javascript
document.getElementsByTagName('body')[0].style.fontSize = ...
```

Also eine 0 statt dem i, das hatte ich noch übersehen ;)

Grüße Patrick

### [#9](https://www.typo3.net/d/106217-css-umschaltung/9) · typo3_hp · 2011-07-12

Vielen Dank!

Funktioniert in der Tat!

Grüße

---

Quelle: „CSS - Umschaltung“, typo3.net, https://www.typo3.net/d/106217-css-umschaltung
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.