CSS durch JS ändern.

[Jan]

Hallo,

ich möchte durch einen Klick sämtliche Schriftgrößen meiner Homepage größer darstellen. Hierzu habe ich gegoogelt und folgendes über selfHTML gefunden:

function bigFontSize() {  
	var elem = document.getElementsByTagName('body');  
	for(i=0;i<elem.length;i++) {  
     	elem[i].style.fontSize = 250+"%";  
   	}  
}

<a href="" onClick="bigFontSize();">Gross</a>

Leider funktioniert das nur bedingt. Wenn ich auf den Link klicke, wird die Schrift der kompletten Homepage zwar um einiges größer, allerdings nur für 1 Sekunde. Anschließend wechsel sie wieder zurück zu ihrem normalen Zustand. Weiteres Googeln nach "automatically reverts back" etc. brachte mich nicht weiter. Wie kann ich erreichen, dass die per JS vorgenommenen Änderungen dauerhaft bleiben?

Vielen Dank.!

[ChrisB]

Hi,

function bigFontSize() {

var elem = document.getElementsByTagName('body');
for(i=0;i<elem.length;i++) {
      elem[i].style.fontSize = 250+"%";
    }
}

  
body kannst du über document.body ansprechen, da braucht es kein getElementsByTagName für; und eine Schleife ist auch höchst überflüssig, weil ein Dokument nur ein body-Element hat.  
  

> `<a href="" onClick="bigFontSize();">Gross</a>`{:.language-html}  
>   
> Leider funktioniert das nur bedingt. Wenn ich auf den Link klicke, wird die Schrift der kompletten Homepage zwar um einiges größer, allerdings nur für 1 Sekunde.  
  
… und danach wird die Seite neu geladen, weil du mit einem leeren href-Attribut wieder auf das aktuelle Dokument verwiesen hast, und Links nun mal zum Laden von Seiten führen.  
  

> Wie kann ich erreichen, dass die per JS vorgenommenen Änderungen dauerhaft bleiben?  
  
Indem du das Neuladen der Seite unterbindest:  
  
`<a href="#" onClick="bigFontSize();return false;">Gross</a>`{:.language-html}  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Gunnar Bittersmann]

@@Jan:

nuqneH

Wie kann ich erreichen, dass die per JS vorgenommenen Änderungen dauerhaft bleiben?

1. Indem du keine a-Elemente für Dinge verwendest, die keine Links sind. Das button-Element bietet sich an; Styling per CSS.

2. Und wenn schon a-Element, dann ohne @href=Attribut.

@href="#" für Dinge, die kein Link zum Seitenanfang sind, ist ein ziemlich sicheres Zeichen für  Missbrauch des a-Element, zumindest des @href-Attributs.

Qapla'

[molily]

Hallo,

<a href="" onClick="bigFontSize();">Gross</a>

Leider funktioniert das nur bedingt. Wenn ich auf den Link klicke, wird die Schrift der kompletten Homepage zwar um einiges größer, allerdings nur für 1 Sekunde. Anschließend wechsel sie wieder zurück zu ihrem normalen Zustand.

Siehe Event-Handling: Unterdrücken der Standardaktion eines Ereignisses in meiner JavaScript-Dokumentation.

Grüße,
Mathias