Bedingte Formatierung mit CSS

  • Guten Abend,


    ich bin zurzeit dabei eine kleine Seite zu basteln, die zwei Thermofühler und einen Ausgang anzeigt.


    Hier mein Script-Code im HTML Code:



    Wie ihr vll schon seht, will ich die "vonRaspiBrenner.innerHTML", je nach dem ob der Wert von "datenVonRaspi[4]" 1 oder 0 ist, mit einer Class formatieren. Ich hab nicht viel Ahnung von HTML bzw von Javascript. So wie es jetzt ist funktioniert es nicht.


    Wie ist die "Best practice" für sowas?


    Ich hoffe ihr könnt mir helfen. Schon mal danke im Voraus.


    Mfg maddig

  • Hallo maddig!


    Wenn Du Das Script vollständig posten würdest, könnte Dir vielleicht jemand helfen. Ich sehe nur </script> am Ende, aber kein Bezugs-Tag am Anfang. Auch HTML/CSS ist nur am Rande von Bedeutung für Deine Frage, eher Javascript? ;)


    Bei HTML oder CSS hätte ich evtl. auch antworten können, bei Javascript bin ich raus. :daumendreh2:

  • Hi,


    ok sorry. Hätte ich mir eig. denken können.


    Hier der gesamte HTML Code:



    und hier noch die CSS:




    Das Python Script schickt einfach die Werte als String an den Socket als "stringVonRaspi"


    Ich hoffe das hilft weiter.


    Die Daten von "datenVonRaspi[4]" sind entweder 1 oder 0 (Ist ein Eingang). Und jenachdem soll dann der Text AN oder AUS erscheinen und eben die Class "AN" oder "AUS" verwendet werden um den Hintergrund Grün oder Rot zu machen.


    Mfg
    maddig

  • Hallo maddig,


    das kannst du doch mit etwas jQuery sehr elegant lösen.


    jQuery herunterladen und einbinden:


    Code
    <script src="mein_pfad_zu_jquery/jquery.js"></script>


    oder die aktuellste Version von jquery.com nutzen:


    Code
    <script src="http://code.jquery.com/jquery-latest.js"></script>


    dann die Container direkt ansprechen:


    Code
    $('#mein_div_container').css('background-color', 'red');
    $('#mein_div_container').css('background-color', '#FF0000');


    und die Inhalte verändern:


    Code
    $('#mein_div_container').html('mein_inhalt_fuer_den_container');
  • Danke das sieht schonmal sehr gut aus.


    Und diese Codezeilen zum verändern setzte ich einfach anstatt .innerHTML einfach in meine if-Abfrage im Script?

  • Und diese Codezeilen zum verändern setzte ich einfach anstatt .innerHTML einfach in meine if-Abfrage im Script?


    Ja.


    Du musst allerdings deinen HTML Code minimal umbauen. Zum Ansprechen der div Container über die id sind eindeutige Bezeichnungen erforderlich (es darf nur einen div Container mit einem definierten Namen geben) und du musst dein .css entsprechend anpassen.


    Aus


    Code
    .meineKlasse {}


    wird also


    Code
    #meineKlasse {}


    In deinem Code statt


    Code
    <div id="Anzeige" class="tempanzeige">


    dann also


    Code
    <div id="tempanzeige">


    und


    Code
    #tempanzeige {
       text-align: center;
       margin-top: 15px;
       min-height: 150px;
       max-height: 150px;
       background-color: #e0e0e0;
       border: 1px solid #000;
    }


    im .css Code

    Edited once, last by doing ().

  • Ok danke.


    Ich verstehe es trz nicht ganz. Wenn ich es änder dann wird bei Oelbrenner garnichts mehr angezeigt.


    Ich kenne mich mit HTML überhaupt nicht aus.


    Es soll ja auch nur das Feld "Oelbrenner" betreffen. Die Änderungen in der CSS betreffen ja aber alle Container.

  • Ich habe die Daten aus deinem WebSocket Request nicht, aber so geht das:




    Damit sich die Seite alle 5 Sekunden neu läd und die Inhalte aktualisiert habe ich setInterval() eingebaut.

    Edited once, last by doing ().