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
