Div style ist nicht definiert (Javascript)

Fand ich dieses Skript in stackoverflow.

 function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hideable");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
       }

<a href="#" onclick="showhide('features');" >features</a>
<a href="#" onclick="showhide('design');"  >design</a>
<a href="#" onclick="showhide('create');" >create</a>

<div class="hideable" id="features">Div 1</div>
<div class="hideable" id="design">Div 2</div>
<div class="hideable" id="create">Div 3</div>

Aber es sagt, div.Formatvorlage nicht definiert. Warum? 🙂

In welchem browser?
welchen browser verwendest du ??
Neueste FF 17.0.1
IE version kleiner als 9 unterstützt diese Eigenschaft nicht

InformationsquelleAutor user1632298 | 2013-01-15

  1. 6

    Sollten Sie nie verwenden Sie eine for-in-Schleife. 

    document.getElementsByClassName('someClass')

    gibt eine NodeList, die Erben nicht aus Array.prototype, aber es ist ähnlich in einigen Aspekten. Es ist eine Liste von Knoten, wie schon der name sagt. Das bedeutet, es hat eine length Eigentum und sollte nur zugegriffen werden mit:

    var myElements = document.getElementsByClassName('yourClass');
for (var i = 0, ii = myElements.length; i < ii; i++) {
    console.dir(myElements[i].style);
};

    Und hier ist, wie Sie eigentlich sollte um ein element auszublenden.

    /**
 * Shows or hides an element from the page. Hiding the element is done by
 * setting the display property to "none", removing the element from the
 * rendering hierarchy so it takes up no space. To show the element, the default
 * inherited display property is restored (defined either in stylesheets or by
 * the browser's default style rules.)
 *
 * Caveat 1: if the inherited display property for the element is set to "none"
 * by the stylesheets, that is the property that will be restored by a call to
 * showElement(), effectively toggling the display between "none" and "none".
 *
 * Caveat 2: if the element display style is set inline (by setting either
 * element.style.display or a style attribute in the HTML), a call to
 * showElement will clear that setting and defer to the inherited style in the
 * stylesheet.
 * @param {Element} el Element to show or hide.
 * @param {*} display True to render the element in its default style,
 * false to disable rendering the element.
 */
var showElement = function(el, display) {
  el.style.display = display ? '' : 'none';
};

var myElement = document.getElementById('someID');
showElement(myElement, false);//it should now be hidden.

    InformationsquelleAutor flavian

  2. 3
    for(var i = 0; i < divs.length; i++) {
         divs[i].style.display = "none";
      }

    EDIT: für die in Schleifen verwendet werden, um eine Schleife durch Objekt-Eigenschaften

    InformationsquelleAutor karaxuna

  3. 1

    Ersetzen 

    for(var div in divs) {

    mit

    for(var i=0; i<divs.length;i++) {
   var div = divs[i];

    divs, das Ergebnis getElementsByClassName, ist nicht wirklich ein array, aber ein NodeList, ein array-ähnliches Objekt, und Sie waren die Iteration auf Ihre Eigenschaften, nicht Ihre Elemente.

    InformationsquelleAutor Denys Séguret

  4. -2

    Stellen Sie sicher, dass alle Elemente in Ihrer for-in Schleife sind DOM-Elemente. Es ist eine gute übung, filter for-in Schleife mit einem hasOwnProperty():

          for(var div in divs) {
           if (divs.hasOwnProperty(div)) {
               if (div && div.style) {
                   div.style.display = "none";
               }
           }
      }

    InformationsquelleAutor Konstantin Dinev

Schreibe einen Kommentar