• Home
  • Blog
  • Agentur Klatsch

Style Angaben onclick ändern

Für eine Änderung der Style Angaben mittels onClick gibt es verschiedene Ansätze.
Beispielsweise mittels der Methoden:
getElementById() | getElementsByName() | getElementsByTagName()
vgl.: https://de.selfhtml.org/javascript/objekte/document.htm

getElementById() ist eigentlich selbsterklärend:
document.getElementById('meineID').style.background='#ffffff'
Hier bekommt die ID #meineID die Hintergrundfarbe weiss. Die ggf. ursprünglichen vorhandenen Style Angaben werden nicht mehr verwendet.
Das funktioniert bei den anderen Methoden genauso.

Etwas kniffliger wird es wenn man css Klassen (class=““)  ändern möchte.
Dafür kann man querySelectorAll verwenden. Da Klassen mehrfach vorkommen können, benötigen wir etwas mehr Code:
for (var i = 0; i < document.querySelectorAll(".foo").length; i++) {
document.querySelectorAll(".foo")[i].style.fontSize = "150%"; }

Hier bekommen alle Elemente der Klasse .foo eine Font Grösse von 150%.
Mehrfach Verwendung mittels Komma trennen.

Sollen nur auf das erste vorkommende Element zugegriffen werden, kann die Methode querySelector() benutzt werden:
document.querySelector(".foo").style.fontSize = "150%";

Beispiel:
Es sollen gleichzeitig die Selektoren h1, p und die Klasse foo einen Schriftgrad von 150% erhalten, das Element oder der Container mit der ID #meineId 650 Pixel breit werden und die Hintergrundfarbe weiss bekommen:
Aufruf: <a href=“javascript:gross ()“>Gross machen</a>
function gross () {
for (var i = 0; i < document.querySelectorAll("h1, p, .foo").length; i++) {
document.querySelectorAll("h1, p, .foo")[i].style.fontSize = "150%"; }
document.getElementById('meineID').style.width='650px';
document.getElementById('meineID').style.background='#ffffff'
}

ACHTUNG:
Selektoren, welche einen Bindestrich enthalten, werden in dieser Schreibweise nicht verarbeitet und in der Regel zusammengeschrieben:
fontSize, marginLeft, etc….  vgl.:
https://www.w3schools.com/cssref/pr_margin-left.asp
https://www.w3schools.com/jsref/prop_style_marginleft.asp

Häufig, gerade in Content Management Systemen mit float Layouts, ist es schwierig, eine Sprungmarke / Link innerhalb eines DIV Containers „nach oben“ zu setzen, damit automatisch nach oben gescrollt wird. Die bewährte Methode mittels eines Ankers (#top) funtioniert deswegen häufig nicht, weil die URL im CMS meistens nach dem Prinzip: index.php?id=123 aufgebaut ist. Als Ergebnis wird der Anker #top auf der Startseite aufgerufen und nicht auf der Ausgangsseite. Auch das „suchmaschinenfreundliche“ umschreiben der URLs schafft hier keine Abhilfe.

LÖSUNG:
Die Funktion scrollIntoView in Verbindung mit einer ID.
Im Head Bereich das JavaScript einbinden:

<script type="text/javascript"><!--
function top () {
document.getElementById("oben").scrollIntoView(true);
}
// --></script>

Im BODY das Ziel markieren:

<div id="oben">Anfang des DIV Containers</div>

und unten den Link setzen:

<a href="javascript:top()">nach oben</a>
Dann klappts auch innerhalb eines DIV Containers…