Die Breite mehrerer gleicher Elemente verändern

[steckl]

Hi,

Guten Abend!

Es geht um folgendes: Mit window.innerWidth und einem entsprechenden Handler lasse ich einige Objekte auf meiner Website dynamisch an die Browsergröße anpassen.

Dass hier Javascript wohl der falsche Weg ist wurde ja bereits erwähnt.
Sieht aus als würdest du mit JS die CSS-Eigenschaft margin-right (bzw. padding-right) simulieren wollen.

Aber ich schreibe trotzdem mal einige Anmerkungen zu deinem Code, da dies ja immerhin einen Lerneffekt haben könnte.

Die zu verändernden Elemente sehen so aus:

<div class="backtotop" id="backtotop">
<a href="#top" target="_top">Nach oben</a>
</div>

Die ID muss eindeutig sein und darf in deinem Dokument nur einmal vorkommen.

var backtotop = document.getElementById("backtotop").getElementsByTagName("div");

Du könntest hier alle DIVs in backtotop speichern, wenn du das getElementById was hier eh nicht passt (weil es ja nur ein Element mit der ID geben darf) wegläßt. Dann stehen in backtotop alle div-Elemente.

for (var i = 0; i < backtotop.length; i++;) {

In dieser Schleife kannst du dann die einzelnen Elemente von backtotop durchlafuen und mit einem if und der Eigenschaft className abprüfen, ob das Element zur Klasse backtotop gehört. Und den folgenden Code nur ausführen, wenn es dazugehört.

document.getElementById("backtotop").style.width = (width - 290) + "px";

Hier kannst du direkt über backtotop[i] auf die Elemente zugreifen.
Ist width eine Variable?

}

Bitte, könnt ihr mir sagen was ich falsch mache und mir evtl. ein Beispiel geben wie es funktioniert?

Hoffe ich konnte dir weiterhelfen. Und noch ein Tipp: Wenn deine Scripts nicht funktionieren wirf mal einen Blick in die Fehler-Konsole vom Firefox (unter Extras -> Fehler-Konsole), dort werden dir deine Javascript-Fehler angezeigt.

mfG,
steckl