ebody: CSS background per Javascript ändern

problematische Seite

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

  1. problematische Seite

    Hallo,

    720.jpg");';
    

    da ist ein „;“ zu viel

    720.jpg")';
    

    Gruß
    Jürgen

  2. problematische Seite

    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
  3. problematische Seite

    @@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 von domElement.style.background an 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
    1. problematische Seite

      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
      1. problematische Seite

        @@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
      2. problematische Seite

        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