Frage von CiveDG, 49

CSS Value über Javascript ändern?

Hallo zusammen,

Ich bin gerade dabei eine Homepage zu erstellen und stehe vor folgendem Problem: bei einem Scrollevent soll das Padding-Right zwischen Listenelementen geändert werden. Mit document.getElementsByTagName("li").style.paddingRight = "100px"; ändert sich nichts... Hier ein kurzer Ausschnitts des Quelltexts:

Antwort
von MonkeyKing, 49

Am schmerzfreiesten kommst du zum Ziel wenn du auf deiner Seite die JQuery Javascript Bibliothek einbindest:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

dann nur noch

$("li").css('padding-right', '100px');

fertig.

Kommentar von userfromberlin ,

JQuery ist für solch simple Operationen vollkommen unnötig

Kommentar von MonkeyKing ,

Jein. Eigentlich hast du Recht - es ist ziemlicher Overkill für eine einfache CSS Manipulation JQuery zu verwenden. Aber ich vermute aber dass es nicht das einzige ist was er vorhat. Und sobald man wirklich in dem Umfeld produktiv arbeiten kann ist das Ganze mit vanilla Javascript weitaus umständlicher. 

Kommentar von heilwigkenner ,

Overkill. Wenn er jQuery! braucht, wird er wohl irgendwann darauf kommen - für einen Anfänger reicht Vanilla JS.

Antwort
von userfromberlin, 47

Ja, weil Du ein gezieltes Element ansprechen musst:
var li = document.getElementsByTagName("li");

for(var i = 0; i < li; i++){li[i].style.paddingRight = "100px";}

Kommentar von CiveDG ,

Alles klar, vielen Dank. Habe das i<li noch auf li.length geändert und das hat auch funktionier.
Aber bei meinem else Zweig habe ich das ganze umgedreht also
for(var i = 0; i<li.length;i++){li[i].style.paddingRight = "20px";}  doch das funktioniert komischerweise nicht mehr... Hättest Du eine Ahnung woran das liegen kann?

Kommentar von userfromberlin ,

Sorry, das ".length" hatte ich irgendwie vergessen (;. Aber zu der ergänzenden Frage: Schau doch mal in der Console und poste die Fehler Beschreibung. Ich könnte mir denken, lass li nur im if definiert ist. Das musst Du vors if/else ziehen.

Kommentar von CiveDG ,

Der einzige Error ist folgender: TypeError: li is undefined

Hier noch der jetzige Quelltext: http://imgur.com/uzSesFD

Kommentar von userfromberlin ,

Ja, dann siehe Fehler Lösung im ersten Kommentar

Kommentar von CiveDG ,

Ja, vielen Dank habe den Fehler gefunden.
Danke für Deine Hilfe!

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten