Hallo Zorro, als grundsätzliche Überlegung möchte ich Dir mitgeben, dass man styles möglichst nur dann von Hand setzen sollte, wenn es nicht anders geht. Zum Beispiel, wenn die Werte berechnet werden müssen. Im Normalfall sollte man seine Seite über fertige CSS Regeln stylen, und wenn man etwas umstylen will, Klassen verwenden. Du kannst über die classList Eigenschaft einem Element jederzeit Klassen hinzufügen und wegnehmen. classList wird nicht vom Internet Explorer unterstützt, aber auf MDN gibt's einen umfangreichen [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Polyfill) dafür. Ohne den Polyfill musst Du Dir eine Hilfsfunktion bauen, um das className Attribut zu manipulieren. Zu deiner Frage. So, wie Du top übergibst, ist es eine Variable. Was steht da denn drin? Der Zugriff auf ein Property, das nur namentlich bekannt ist, erfolgt nicht über den Punkt-Operator, sondern über die von Arrays bekannte Indexschreibweise. Du solltest ChangeStyle auch nicht so gestalten, dass Du eine Element-ID übergibst. Damit schränkst Du die Wiederverwendbarkeit von ChangeStyle unnötig ein. Entweder übergibst Du einen CSS Selektor und suchst das Element mit document.querySelector (oder querySelectorAll), oder du suchst das Element vor dem Aufruf und übergibst das DOM Objekt des Elements. D.h. du könntest ChangeStyle so aufrufen: ~~~js let element = document.getElementById("BeispielSection"); ChangeStyle(element, "top", "300px"); ~~~ oder so: ~~~js ChangeStyle(document.getElementById("BeispielSection"), "top", "300px"); ~~~ und solltest dann in ChangeStyle so vorgehen: ~~~js function ChangeStyle(Element, Change, Wert) { Element.style[Change] = Wert; } ~~~ Wenn Du eine Variable `top` hast, in der sich der String "top" befindet, kannst Du natürlich auch diese Variable als Parameter übergeben. Wenn Du mit CSS Selektoren arbeiten möchtest, könnte man es so machen: ~~~js // ID Selektor ChangeStyle("#BeispielSection", "top", "300px"); function ChangeStyle(selector, Change, Wert) { let elems = document.querySelectorAll(selector); for (let i=0; i<elems.length; i++) elems[i].style[Change] = Wert; } } ~~~ querySelectorAll wird hinreichend unterstützt (ab IE 8), dafür brauchst Du keinen Polyfill mehr. Statt eines ID Selektors könntest Du auch andere Selektoren übergeben und so mehrere Elemente auf einmal stylen. Ich habe bewusst die for(;;) Scheife verwendet und nicht das .forEach Konstrukt, um hier nicht auf forEach Polyfills für den Internet Explorer eingehen zu müssen. Ich finde allerdings den Nutzen dieser Funktion noch begrenzt. Du schriebst, du würdest top als "Objekt" übergeben. Das ist eigentlich ein guter Ansatz, ein Objekt kann mehrere Eigenschaften haben und erlaubt Dir das setzen mehrerer Style-Eigenschaften auf einmal. ~~~js let newStyles = { top: "300px", left: "50px", margin: "100px 75px" }; ~~~ Dann muss ChangeStyle aber etwas anders aussehen: Es muss eine Schleife über die Eigenschaften dieses Objekts laufen lassen. Das geht mit der for...in Schleife oder mit Object.getOwnPropertyNames. Unterschied ist, ob Du geerbte Properties mitnehmen möchtest (das tut for...in) oder nicht. Mit for...in sieht es so aus: ~~~js function ChangeStyle(selector, newStyle) { let elems = document.querySelectorAll(selector); for (let i=0; i<elems.length; i++) { for (let n in newStyle) { elems[i].style[n] = newStyle[n]; } } } ~~~ Wenn Du keine geerbten Properties verwenden willst, brauchst Du Object.getOwnPropertyNames(newStyle). Diese Methode liefert ein Array mit Property-Namen, das musst Du mit einer for(;;) Schleife verarbeiten (funktioniert auch im Internet Explorer) oder mit der for...of Schleife (funktioniert nicht im Internet Explorer). Das sei dann als einfache Übung dem Leser überlassen 😉 _Rolf_ -- sumpsi - posui - obstruxi

Hallo Zorro, als grundsätzliche Überlegung möchte ich Dir mitgeben, dass man styles möglichst nur dann von Hand setzen sollte, wenn es nicht anders geht. Zum Beispiel, wenn die Werte berechnet werden müssen. Im Normalfall sollte man seine Seite über fertige CSS Regeln stylen, und wenn man etwas umstylen will, Klassen verwenden. Du kannst über die classList Eigenschaft einem Element jederzeit Klassen hinzufügen und wegnehmen. classList wird nicht vom Internet Explorer unterstützt, aber auf MDN gibt's einen umfangreichen [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Polyfill) dafür. Ohne den Polyfill musst Du Dir eine Hilfsfunktion bauen, um das className Attribut zu manipulieren. Zu deiner Frage. So, wie Du top übergibst, ist es eine Variable. Was steht da denn drin? Der Zugriff auf ein Property, das nur namentlich bekannt ist, erfolgt nicht über den Punkt-Operator, sondern über die von Arrays bekannte Indexschreibweise. Du solltest ChangeStyle auch nicht so gestalten, dass Du eine Element-ID übergibst. Damit schränkst Du die Wiederverwendbarkeit von ChangeStyle unnötig ein. Entweder übergibst Du einen CSS Selektor und suchst das Element mit document.querySelector (oder querySelectorAll), oder du suchst das Element vor dem Aufruf und übergibst das DOM Objekt des Elements. D.h. du könntest ChangeStyle so aufrufen: ~~~js let element = document.getElementById("BeispielSection"); ChangeStyle(element, "top", "300px"); ~~~ oder so: ~~~js ChangeStyle(document.getElementById("BeispielSection"), "top", "300px"); ~~~ und solltest dann in ChangeStyle so vorgehen: ~~~js function ChangeStyle(Element, Change, Wert) { Element.style[Change] = Wert; } ~~~ Wenn Du eine Variable `top` hast, in der sich der String "top" befindet, kannst Du natürlich auch diese Variable als Parameter übergeben. Wenn Du mit CSS Selektoren arbeiten möchtest, könnte man es so machen: ~~~js // ID Selektor ChangeStyle("#BeispielSection", "top", "300px"); function ChangeStyle(selector, Change, Wert) { let elems = document.querySelectorAll(selector); for (elem of elems) { elem.style[Change] = Wert; } } ~~~ querySelectorAll wird hinreichend unterstützt (ab IE 8), dafür brauchst Du keinen Polyfill mehr. Statt eines ID Selektors könntest Du auch andere Selektoren übergeben und so mehrere Elemente auf einmal stylen. Ich finde allerdings den Nutzen dieser Funktion noch begrenzt. Du schriebst, du würdest top als "Objekt" übergeben. Das ist eigentlich ein guter Ansatz, ein Objekt kann mehrere Eigenschaften haben und erlaubt Dir das setzen mehrerer Style-Eigenschaften auf einmal. ~~~js let newStyles = { top: "300px", left: "50px", margin: "100px 75px" }; ~~~ Dann muss ChangeStyle aber etwas anders aussehen: Es muss eine Schleife über die Eigenschaften dieses Objekts laufen lassen. Das geht mit der for...in Schleife oder mit Object.getOwnPropertyNames. Unterschied ist, ob Du geerbte Properties mitnehmen möchtest (das tut for...in) oder nicht. Mit for...in sieht es so aus: ~~~js function ChangeStyle(selector, newStyle) { let elems = document.querySelectorAll(selector); for (elem of elems) { for (let n in newStyle) { elem.style[n] = newStyle[n]; } } } ~~~ Wenn Du keine geerbten Properties verwenden willst, brauchst Di Object.getOwnPropertyNames(newStyle). Diese Methode liefert ein Array mit Property-Namen, das musst Du mit einer for(;;) Schleife verarbeiten (funktioniert auch im Internet Explorer) oder mit der for...of Schleife (funktioniert nicht im Internet Explorer). Das sei dann als einfache Übung dem Leser überlassen 😉 _Rolf_ -- sumpsi - posui - obstruxi