Bedingte Formatierung mit CSS

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • 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

    • Offizieller Beitrag

    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');
  • 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

    Einmal editiert, zuletzt von doing (15. Januar 2017 um 11:57)

  • 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.

    Einmal editiert, zuletzt von doing (15. Januar 2017 um 14:33)

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!