nicht angemeldet
CSS background per Javascript ändern
0 
JürgenB
0 
Rolf B
0 
Gunnar Bittersmann
0 Rolf B
CSS background per Javascript ändern
Hallo,
https://codepen.io/ebody/pen/rNyOrMW
In der 2. Box möchte ich das Hintergrundbild per Javascript ändern. Der Farbverlauf soll beibehalten werden. Leider funktioniert es nicht und verstehe nicht warum.
let domElement = document.querySelector('#box2');
domElement.style.background = 'linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,0) 100%), url("https://cdn.pixabay.com/photo/2021/05/05/18/06/lemon-6231697_960_720.jpg");';
Die Breite zu ändern funktioniert z.B.
domElement.style.width = '400px';
Gruß ebody
-
Hallo,
…720.jpg");';da ist ein „;“ zu viel
…720.jpg")';Gruß
Jürgen -
Hallo ebody,
ich weiß nicht wie ihr mit Codepen klarkommt. Breakpoints im Script setzen? Gelingt mir nicht.
Lass das Semikolon weg. Das ist Teil der Stylesheet-Syntax, nicht des Eigenschaftswerts
Rolf
--
sumpsi - posui - obstruxi -
@@ebody
In der 2. Box möchte ich das Hintergrundbild per Javascript ändern. Der Farbverlauf soll beibehalten werden. Leider funktioniert es nicht und
Keine gute Idee, das sagte Cheatah schon vor 11 Jahren: https://forum.selfhtml.org/cites/1711
Der Fehler ist nicht das Semikolon im Wert von
domElement.style.background, sondern die Verwendung vondomElement.style.backgroundan sich.😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar,
muss man diesen Gepearden-Aussage nicht ein Zebra-Steak beilegen?
Wenn es genau zwei Bilder gibt - "Normalbild" und "Ersatzbild" -, dann bin ich bei Dir, dann kann man mit einer Klasse umschalten. Bei mehr als zwei Bildern natürlich auch, sofern es ein definiertes Set ist.
Anders ist es, wenn die Bilderliste im CSS nicht festgelegt werden kann, weil sie variabel ist. In dem Moment würde ich es für verfehlt halten, mit dem CSSOM auf den Regeln herumzuturnen und sie zu modifizieren. Oder serverseitig ein Regelset per PHP zu generieren und via JS die passende Regel zu selektieren.
Also, lieber ebody, kannst Du deinen Usecase konkretisieren, damit man den rechten Weg empfehlen kann?
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Anders ist es, wenn die Bilderliste im CSS nicht festgelegt werden kann, weil sie variabel ist.
Auch in dem Fall wäre es falsch, gleichbeibende Dinge wie den Gradienten im JavaScript-Code zu haben.
In dem Moment würde ich es für verfehlt halten, mit dem CSSOM auf den Regeln herumzuturnen und sie zu modifizieren.
Wenn das Einzige, was sich ändert, die Bildressource ist, dann ist die Bildressource das Einzige vom Hintergrund, was im JavaScript-Code aufzutauchen hat. Custom property FTW. Per JS wird der Wert der custom property geändert – sonst nichts. Der Rest passiert im Stylesheet. Guckst du.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon -
Hallo,
die Bilderliste soll variabel und per Script zu steuern sein.
Es funktioniert, wenn ich das ; lösche. Das reicht mir jetzt erstmal.
Vielen Dank für die Hinweise. Wenn ich nochmal so etwas umsetze oder Zeit habe, werde ich es evtl. noch anpassen.
Gruß ebody
-
-