*Alex*: html-Elemente mit Werten belegen (Fantasieattribute)

Hallo Ihr

Ich habe soeben beim Ausprobieren eines Javascriptes entdeckt, dass ich html-Elementen einfach irgendwelche Attribute verpassen kann und die dann mit javascript auslesen kann:

HTML:

<button type="button" id="2" name="nein" wert="auswählen" wert2="dividieren" value="2.4.2012" onclick="wechsel(2,1)">02</button>  
<button type="button" id="3" name="ja" wert="abwählen" wert2="addieren" value="3.4.2012" onclick="wechsel(3,1)">03</button>

JAVASCRIPT:

if(document.getElementById(nummer).wert=="auswählen")  
{  
        document.getElementById(nummer).style.backgroundColor = "#00ff00";  
        document.getElementById(nummer).wert = "abwählen";  
}  
else  
{  
        document.getElementById(nummer).style.backgroundColor = "#004f00";  
        document.getElementById(nummer).wert = "auswählen";  
}

funktioniert super.

Aber darf man das?
Irgendwie habe ich das Gefühl, dass sowas nicht erwünscht ist.
Gibt es eine andere Methode HTML-Elemente vorzubelegen, die erlaubt ist?

  1. Hi,

    kommt auf'n Doctype an.

    In HTML5 gibt's data-* Attribute, in HTML != 5 gibt's AFAIK nichts vergleichbares.

    ~dave

  2. Hallo,

    Ich habe soeben beim Ausprobieren eines Javascriptes entdeckt, dass ich html-Elementen einfach irgendwelche Attribute verpassen kann und die dann mit javascript auslesen kann:

    das ist aber Glückssache, du darfst nicht damit rechnen, dass das in jedem Browser läuft. Denn im Grunde darf ein Browser unbekannte Tags und Attribute einfach ignorieren. Dass er dem HTML-Elementobjekt in Javascript gleichnamige Eigenschaften anhängt, ist "good will".

    Aber darf man das?

    Kommt drauf an. Das HTML-Dokument wird dadurch formal ungültig, d.h. falsch.

    Gibt es eine andere Methode HTML-Elemente vorzubelegen, die erlaubt ist?

    Siehe Antwort von dave. Für alle bisherigen (X)HTML-Dialekte kannst du bestenfalls andere, erlaubte Attribute zweckentfremden, also missbrauchen.

    Aber wenn du die Daten sowieso mit Javascript verarbeiten willst, was spricht dann dagegen, sie auch in einem Javascript-Block zu definieren?

    Ciao,
     Martin

    --
    Die letzten Worte des Neandertalers:
    Möchte doch zu gern wissen, was in der Höhle ist ...
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Ich habe soeben beim Ausprobieren eines Javascriptes entdeckt, dass ich html-Elementen einfach irgendwelche Attribute verpassen kann und die dann mit javascript auslesen kann:

      das ist aber Glückssache, du darfst nicht damit rechnen, dass das in jedem Browser läuft. Denn im Grunde darf ein Browser unbekannte Tags und Attribute einfach ignorieren. Dass er dem HTML-Elementobjekt in Javascript gleichnamige Eigenschaften anhängt, ist "good will".

      Das ist so nicht richtig. Der HTML5-Standard schreibt vor, was zu tun ist: unbekannte Elemente und Attribute sind ins DOM aufzunehmen. Der HTML5-Standard macht in diesem Punkt nichts anderes, als das bestehende Verhalten aller großen Browser zu kodifizieren. Siehe z.B. http://www.alistapart.com/articles/scripttriggers/ (1.2.2005)

      Mathias

  3. <button type="button" id="2" name="nein" wert="auswählen" wert2="dividieren" value="2.4.2012" onclick="wechsel(2,1)">02</button>

    <button type="button" id="3" name="ja" wert="abwählen" wert2="addieren" value="3.4.2012" onclick="wechsel(3,1)">03</button>

    
    >   
    > JAVASCRIPT:  
    > ~~~javascript
    
    if(document.getElementById(nummer).wert=="auswählen")  
    
    > {  
    >         document.getElementById(nummer).style.backgroundColor = "#00ff00";  
    >         document.getElementById(nummer).wert = "abwählen";  
    > }  
    > else  
    > {  
    >         document.getElementById(nummer).style.backgroundColor = "#004f00";  
    >         document.getElementById(nummer).wert = "auswählen";  
    > }
    
    

    funktioniert super.

    Aber darf man das?

    Mir scheint, du bringst einiges durcheinander.

    Wenn du eine Control mit einem An/Aus-Status suchst, kannst du eine Checkbox verwenden und z.B. einem zugehörigen Label eine Klasse »aktiviert« geben. Dann hast du sowohl eine Kennzeichnung um DOM als auch einen Angriffspunkt für Formatierung per Stylesheet.

    Eine Klasse ist data-Attributen vorzuziehen, wenn eine Adressierung z.B. mit CSS im Spiel ist. Wenn man darüber hinaus noch weitere Daten für das JavaScript braucht, kann man diese auch im JavaScript unterbringen. Vielleicht erschließt sich das aus dem Kontext, wenn man HTML und JavaScript korrekt trennt und die Event-Handler mit JavaScript registriert.

    Davon abgesehen kannst du in JavaScript jederzeit Eigenschaften an DOM-Knoten erzeugen. Das unterliegt keinen Markup-Regeln und ist browserübergreifend möglich. Um das zu beschränken und zu standardisieren, gibt es für die data-Attribute auch eine DOM-Eigenschaft, nämlich dataset (welche noch nicht alle Browser kennen).

    Mathias

  4. Lieber *Alex*,

    if(document.getElementById(nummer).wert=="auswählen")

    {
            document.getElementById(nummer).style.backgroundColor = "#00ff00";
            document.getElementById(nummer).wert = "abwählen";
    }
    else
    {
            document.getElementById(nummer).style.backgroundColor = "#004f00";
            document.getElementById(nummer).wert = "auswählen";
    }

      
    in meinem Scripts versuche ich immer "abstrakte" Objekte zu definieren, denen ich eine Eigenschaft "element" verpasse, die eine Referenz auf das eigentliche HTML-Element enthält. Diesen Objekten kann ich dann jede beliebige zusätzliche Eigenschaft verpassen, ohne dass ich am DOM oder dem HTML-Element selbst irgendetwas verändern müsste.  
      
    [test.html]  
    ~~~html
    <html>  
        <head>  
            <title>Test</title>  
        </head>  
        <body>  
            <h1>Test</h1>  
            <p id="test1">Hier steht dann <a href="./weiter.html">weiteres zum Nachlesen</a>. Viel Spaß.</p>  
            <script type="text/javascript">
    ~~~~~~javascript
    ]//<![CDATA[  
                function prepareElements (ids) {  
                    var i, test;  
                    window.myObjs = new Array();  
      
                    for (i = 0; i < ids.length; i++) {  
                        test = document.getElementById(ids[i]);  
      
                        if (test) {  
                            myObjs.push({  
                                // Hier wird ein "anonymes" Objekt definiert  
                                eigenschaft1 : "Eigenschaft1",  
                                func1 : function () {  
                                    alert("Eigenschaft1: " + this.eigenschaft1);  
                                },  
                                describeElement : function () {  
                                    alert("<"+this.element.tagName+">: "+this.element.innerHTML);  
                                },  
                                element : test // hier kommt das HTML-Element ins Spiel  
                            });  
                        }  
                    }  
                }  
      
                prepareElements(["eins", "zwei", "test1", "drei"]);  
                // Test  
                window.myObjs[0].func1();  
                window.myObjs[0].describeElement();  
            //]]>
    ~~~~~~html
    </script>  
        </body>  
    </html>
    

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
  5. @@*Alex*:

    nuqneH

    <button type="button" id="2" >

    Dass IDs in HTML 4/XHTML 1 nicht mit einer Ziffer beginnen dürfen, ist dir bewusst?

    document.getElementById(nummer).style.backgroundColor = "#00ff00";

    „Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen, dass Layout-Informationen *in den CSS-Code* gehören, *nicht* in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“ [Cheatah]

    Und du änderst ja sowieso DOM-Elemente.

    Also bspw. mit <button type="button" id="2" name="nein" data-wert="auswählen" >:

    if (document.getElementById(nummer).dataset.wert == "auswählen")  
    {  
            document.getElementById(nummer).dataset.wert = "abwählen";  
    }  
    else  
    {  
            document.getElementById(nummer).dataset.wert = "auswählen";  
    }
    

    Ähm nein, das können wir besser:

    var element = document.getElementById(nummer);  
      
    element.dataset.wert = (element.dataset.wert == "auswählen") ? "abwählen" : "auswählen";
    

    (Für Browser, die dataset noch nicht unterstützen, Alternative mit setAttribute() implmentieren. Oder Klassen statt data-Attribute verwenden.)

    Im Stylesheet ist die jeweilige Farbe für beide Zustände angegeben:

    [data-wert="auswählen"] { background-color: "#004f00" }  
    [data-wert="abwählen"]  { background-color: "#00ff00" }
    

    Ich bin mir aber nicht sicher, ob eine Farbänderung ausreicht, um die unterschiedlichen Zustände zu kennzeichnen. Warum änderst du nicht die Beschriftung der Buttons? Oder ergänzt diese um ein je nach Zustand verschiedenes Icon (kann eine Hintergrundgrafik sein)?

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Guten Tag,

      <button type="button" id="2" >

      Dass IDs in HTML 4/XHTML 1 nicht mit einer Ziffer beginnen dürfen, ist dir bewusst?

      document.getElementById(nummer).style.backgroundColor = "#00ff00";

      Leider ist durch unsinnige und unachtsame Formatierung das Zitieren innerhalb dieses Postings nicht glücklich gelungen. Das Eingehen auf jede unsauber formatierte Zeile spare ich mir hier an dieser Stelle. Man spiele bitte etwas weniger mit den Kommentarzeichen herum und achte auf saubere Strukturen. Der interessierte Leser wird es danken. Soviel zeit muss sein.

      Danke
      Renne

      1. Hallo,

        <button type="button" id="2" >
        Dass IDs in HTML 4/XHTML 1 nicht mit einer Ziffer beginnen dürfen, ist dir bewusst?
                document.getElementById(nummer).style.backgroundColor = "#00ff00";
        Leider ist durch unsinnige und unachtsame Formatierung das Zitieren innerhalb dieses Postings nicht glücklich gelungen. Das Eingehen auf jede unsauber formatierte Zeile spare ich mir hier an dieser Stelle. Man spiele bitte etwas weniger mit den Kommentarzeichen herum und achte auf saubere Strukturen.

        ich habe irgendwie das Gefühl, dass du den falschen Baum ankläffst, denn Gunnars Posting war, was Zitate und Struktur angeht, eigentlich völlig sauber. Vielleicht sollest du selbst auch ein wenig auf die Struktur achten - zum Beispiel, auf welches Posting du eigentlich antwortest.

        Ciao,
         Martin

        --
        Wichtig ist, was hinten rauskommt.
          (Helmut Kohl, 16 Jahre deutsche Bundesbirne)
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hallo

          ich habe irgendwie das Gefühl, dass du den falschen Baum ankläffst, denn Gunnars Posting war, was Zitate und Struktur angeht, eigentlich völlig sauber.

          Eigentlich? Eigentlich! Nein, das war es eigentlich nicht. Und ich "kläffe" nicht falsche Themenbäume an, verehrter "Der Martin", ich weise auf Unzulänglichkeiten und Unsauberkeiten in der Diskussionsführung hin. Das genannte Posting _ist_ unsauber und unstrukturiert. Dem Leser fällt es u.a. schwer, auseinanderzuhalten, was Kommentar ist, und was nicht. Das war vor einigen Jahren hier -Gott sei Dank- zum größten Teil noch anders.

          1. Hi,

            Das genannte Posting _ist_ unsauber und unstrukturiert. Dem Leser fällt es u.a. schwer, auseinanderzuhalten, was Kommentar ist, und was nicht.

            dann solltest du mal zum Optiker oder Augenarzt gehen und dir eine neue Brille anpassen lassen. Ich spreche da aus Erfahrung - mir hat vor gut drei Jahren eine neue Brille auch die Welt völlig neu gezeigt. In einer Schärfe und Klarheit, wie ich sie schon jahrelang nicht mehr kannte.

            Ich habe jedenfalls keine Mühe, in Gunners Posting, auf das du antwortest, Zitat und neuen Text oder rhetorische Wiederholungen auseinanderzuhalten.

            Ciao,
             Martin

            --
            Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
            Aber warum bin ich ans Bett gefesselt?
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hallo,

              Das genannte Posting _ist_ unsauber und unstrukturiert. Dem Leser fällt es u.a. schwer, auseinanderzuhalten, was Kommentar ist, und was nicht.

              Ich habe jedenfalls keine Mühe, in Gunners Posting, auf das du antwortest, Zitat und neuen Text oder rhetorische Wiederholungen auseinanderzuhalten.

              Dann scheinst du der Sorte Mensch anzugehören, die sich in der Unordnung wohlfühlen. Oder hat sich der User "der Martin" flugs eigene CSS-Forenregeln zugelegt und ist sich der chaotischen Anordnung der Dinge respektive der unzulänglichen Formatierung -legt man nicht peinlichst genau Wert auf Linienführung- gar nicht bewußt? Schläft einen Dornröschenschlaf im feinen, sauberen Bettchen, während sich der unregistrierte, bar jeglicher personalisierter Styleregeln abmühende Nutzer durch das Chaos wühlen muss?

              1. Hi,

                Ich habe jedenfalls keine Mühe, in Gunners Posting, auf das du antwortest, Zitat und neuen Text oder rhetorische Wiederholungen auseinanderzuhalten.
                Dann scheinst du der Sorte Mensch anzugehören, die sich in der Unordnung wohlfühlen.

                das ist definitiv so. Allzu übertriebene Ordnung finde ich unbehaglich.

                Oder hat sich der User "der Martin" flugs eigene CSS-Forenregeln zugelegt und ist sich der chaotischen Anordnung der Dinge respektive der unzulänglichen Formatierung -legt man nicht peinlichst genau Wert auf Linienführung- gar nicht bewußt?

                Keine Ahnung; ich sehe das fragliche Posting wie unten abgebildet und weiß nicht, welche Fragen oder Unklarheiten da noch bleiben.

                Ciao,
                 Martin

                --
                Moskito, ergo summ.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                1. [latex]Mae  govannen![/latex]

                  Ich habe jedenfalls keine Mühe, in Gunners Posting, auf das du antwortest, Zitat und neuen Text oder rhetorische Wiederholungen auseinanderzuhalten.
                  Dann scheinst du der Sorte Mensch anzugehören, die sich in der Unordnung wohlfühlen.

                  [...]

                  Oder hat sich der User "der Martin" flugs eigene CSS-Forenregeln zugelegt und ist sich der chaotischen Anordnung der Dinge respektive der unzulänglichen Formatierung -legt man nicht peinlichst genau Wert auf Linienführung- gar nicht bewußt?

                  Keine Ahnung; ich sehe das fragliche Posting wie unten abgebildet und weiß nicht, welche Fragen oder Unklarheiten da noch bleiben.

                  Ich ebenfalls nicht, weder mit meinem CSS noch im Foren-Default gibt es für mich Schwierigkeiten, dem Ablauf zu folgen.

                  Stur lächeln und winken, Männer!
                  Kai

                  --
                  It all began when I went on a tour, hoping to find some furniture
                   Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
                  SelfHTML-Forum-Stylesheet
      2. @@Renne:

        nuqneH

        Das Eingehen auf jede unsauber formatierte Zeile spare ich mir hier an dieser Stelle.

        Schade. Ich habe nämlich keine Ahnung, was dir unsauber erscheinen könnte.

        Man spiele bitte etwas weniger mit den Kommentarzeichen herum

        Hab ich nicht. '»» ' steht genau vor denjenigen Zeilen, die ich aus dem OP übernommen habe.

        Die Zeilen ohne '»» ' sind von mir in mühsamer Handarbeit selbst gefertigt. Oder aus der Zitatesammlung herausgeguttet – ähm nein, dann dürfte die Quellenangabe nicht da sein. ;-)

        Die einzige Unsauberkeit ist, dass die erste zitierte Codezeile als Code formatiert ist, die zweite jedoch nicht. Man möge mir dies nachsehen.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)