Alle Schriftgrössen in einem DIV ändern

[P51D]

Hallo mitienander

Ich möchte gerne alle Schriftgrössen in einem Bereich der Homepage ändern.
Bei einem einzelnen DIV kann man das ja in etwa so machen:

function set_font_size(size){
    switch(size){
        case "small":
            document.getElementById("content").style.fontSize = "11px";
            break;
        case "normal":
            document.getElementById("content").style.fontSize = "13px";
            break;
        case "big":
            document.getElementById("content").style.fontSize = "16px";
            break;
    }
}

Aber wie ändere ich alle Schriftgrössen in dem DIV "content"? Kann man irgendwie alle Kind-Elemente, also alle <p>, <div>, <table>... selektieren und dann die Grössen entsprechend ändern: Die bisherige Grösse um 2px vergrössern oder verkleinern?

Besten Dank für die Hilfe
MFG
P51D

 

[Gilles]

Du solltest grundsätzlich vermeiden mit px Größen zu hantieren. Denn jeder Benutzer sollte die Möglichkeiten haben seine Schriftgröße selber einzustellen. Dies passiert jedoch über den Browser. Bei Firefox ist der Standard 16px (Aber wie gesgat jederzeit abänderbar). Dieser Wert ist 1em. Setzt du nun auf einen Div-Container z.B. eine fontSize von 1.5em so haben auch alle Kind-Elemente diese Größe. (Bei Standard Einstellung im Firefox also 24px).
Setzt du nun auch noch auf ein Kind-Element eine fontSize von 1.5em so ist dieses Kind-Element nun 36px Groß (Von 24px die Hälfte dazu rechnen )
Also setze das ganze doch besser in em Werten um und beachte dass die Größe auch auf alle Kindelemente angewandt wird.

 

[prm]

Üblicherweise definiert man die Schriftgröße über CSS-Angaben.
Wenn du innerhalb eines Divs unterschiedliche Schriftgrößen verwendest, dann musst du diese in den jeweiligen Kindelementen ändern, sofern es sich um feste Größen (px) handelt.
Eleganter wäre es, relative Schriftgrößen wie z.B. "em" zu benutzen. Wenn du hier die Basis des übergeordneten Elternelements änderst, schlägt dies dann auf die Kindelemente proportional durch.

Beispiel:

#content {font-size: 1em}
#content p {font-size: 0.8em}

Wenn du hier bei #content auf 2em ehöhst, wird auch automatisch die Schriftgröße des Absatzes proportional größer.