Linuchs: Mit Javascript style ändern?

Moin,

mit Javascript werte ich die Rechte eines Users aus und möchte ggf. Schaltflächen wegnehmen / hinzufügen. Klar, ich könnte alle durchhecheln und jeder einzelnen class=nodisplay hinzufügen. Eleganter wäre aber, die style_Angabe selbst zu ändern ...

button {
  border:1px solid #ccc;
}
<button id=regie_button_02 onclick="regie_sende( '02' )" title="Nr. 2 an Slaves senden"></button>

... damit ein Slave den nutzlosen Button gar nicht erst sieht.

Aber womöglicht bewirkt das Ändern einer style-Angabe kein neues Rendern? Also doch durchhecheln?

Gruß, Linux

  1. Hey,

    mit Javascript werte ich die Rechte eines Users aus und möchte ggf. Schaltflächen wegnehmen / hinzufügen. Klar, ich könnte alle durchhecheln und jeder einzelnen class=nodisplay hinzufügen. Eleganter wäre aber, die style_Angabe selbst zu ändern ...

    Eleganter wäre vermutlich, alle Elemente zu entfernen für die ein User keine Berechtigung hat.

    Aber womöglicht bewirkt das Ändern einer style-Angabe kein neues Rendern? [...]

    Doch. Zum Style ändern kannst du document.getElementById('xyz').style benutzen.

    Gruß
    Jo

    1. Hallo Jo,

      Aber womöglicht bewirkt das Ändern einer style-Angabe kein neues Rendern? [...]

      Doch. Zum Style ändern kannst du document.getElementById('xyz').style benutzen.

      Ich habe was anderes gemeint. Kann ich per Javascript die CSS-Angabe

      button {
        border:1px solid #ccc;
      }
      

      ändern in

      button {
        border:1px solid #ccc;
        display:none;
      }
      

      Linuchs

      1. Hey,

        Doch. Zum Style ändern kannst du document.getElementById('xyz').style benutzen.

        Ich habe was anderes gemeint. Kann ich per Javascript die CSS-Angabe

        Das ist nichts anderes.

        document.getElementById("xyz").style.display = "none"
        

        Gruß
        Jo

      2. Hallo Linuchs,

        ich würde ja das hidden-Attribut setzen.

        Zu deiner Frage siehe hier https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Stylesheets_dynamisch_ändern

        Gruß
        Jürgen

  2. @@Linuchs

    Klar, ich könnte alle durchhecheln und jeder einzelnen class=nodisplay hinzufügen.

    Keine Klasse, sondern das hidden-Attribut.

    Eleganter wäre aber, die style_Angabe selbst zu ändern ...

    Nein. Wieso sollte das eleganter sein?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. ... damit ein Slave den nutzlosen Button gar nicht erst sieht.

    Ich hau mal in die gleiche Kerbe wie "J o".

    Den Button würde ich dem Slave gar nicht erst senden. Ich denke Du hast PHP auf dem Server?

    <?php if ( isset( $grant['Chorleiter'] ) && $grant['Chorleiter'] ) { ?>
       <button id="regie_button_02" onclick="regie_sende( '02' )" title="Nr. 2 an Slaves senden"></button>
    <?php } ?>
    

    Sowas ist weitaus einfacher als nachträgliches Geschwurbel mit Js.

    1. @@Regina Schaukrug

      <?php if ( isset( $grant['Chorleiter'] ) && $grant['Chorleiter'] ) { ?>
         <button id="regie_button_02" onclick="regie_sende( '02' )" title="Nr. 2 an Slaves senden"></button>
      <?php } ?>
      

      Ich mach das mal sauber™:

      <?php if (isset( $grant['Chorleiter'] ) && $grant['Chorleiter'] ): ?>
         <button id="regie_button_02" onclick="regie_sende( '02' )" title="Nr. 2 an Slaves senden"></button>
      <?php endif; ?>
      

      Den Grund hatte ich mit Dem Martin mal diskutiert.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Ich denke Du hast PHP auf dem Server?

      Der ganze "Master - Slave - Zirkus" ist eine Javascript-Erweiterung. Die Liederbücher sollen nach wie vor lokal druckbar sein, also keine php-Dateien, kein Server.

      1. Hey,

        Der ganze "Master - Slave - Zirkus" ist eine Javascript-Erweiterung. Die Liederbücher sollen nach wie vor lokal druckbar sein, also keine php-Dateien, kein Server.

        Trotzdem wäre es besser Elemente zu entfernen als einfach nur zu verstecken.

        Gruß
        Jo

        1. Hallo,

          Trotzdem wäre es besser Elemente zu entfernen als einfach nur zu verstecken.

          warum? Was ist an removeChild besser als das Setzen des hidden-Attributs?

          Gruß
          Jürgen

          1. Hallo,

            Trotzdem wäre es besser Elemente zu entfernen als einfach nur zu verstecken.

            warum? Was ist an removeChild besser als das Setzen des hidden-Attributs?

            Auch wenn hidden gesetzt ist bleibt das Element im DOM. Jemand der bewusst danach sucht und Schaden anrichten will, findet das und missbraucht dann einen möglichen Bug. Außerdem warum sollte ein Element im DOM vorhanden sein wenn es keinen nutzen für den Client hat?

            Gruß
            Jo

            1. @@J o

              Auch wenn hidden gesetzt ist bleibt das Element im DOM.

              Was von Vorteil ist, wenn man das Ding später wieder anzeigen will.

              Jemand der bewusst danach sucht und Schaden anrichten will, findet das und missbraucht dann einen möglichen Bug.

              Man kann damit genausoviel – also genausowenig – Schaden anrichten wie mit dem Entwicklungswerkzeug seines Browsers, mit dem man ja auch das DOM nach Belieben ändern kann.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            2. Hallo Jo,

              Auch wenn hidden gesetzt ist bleibt das Element im DOM. Jemand der bewusst danach sucht und Schaden anrichten will, findet das und missbraucht dann einen möglichen Bug. Außerdem warum sollte ein Element im DOM vorhanden sein wenn es keinen nutzen für den Client hat?

              und wenn es mit removeChild entfernt wird, steht es trotzdem noch im Quelltext …

              Gruß
              Jürgen

        2. Trotzdem wäre es besser Elemente zu entfernen als einfach nur zu verstecken.

          Jo, habe ich so umgesetzt:

            if ( regie_master == false ) {
              // bei slave regie_buttons entfernen
              var obj = document.getElementsByClassName( "regie_button" );
          alert( "Anzahl buttons=[" + obj.length + "]" );
              for ( i=(obj.length -1); i>(-1); i-- ) {
                obj[i].parentNode.removeChild( obj[i] );
              }
              var regie_interval = setInterval(regie_abrufen, 10000);     // Slave: alle 10 sec Regieanweisung abrufen
            }
          

          Linuchs

  4. Hallo! Wäre es nicht besser die ganze Class zu ändern? document.getElementById('xyz').className='newclass'