Div style n'est pas défini (Javascript)

J'ai trouvé ce script dans 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>

Mais il dit, div.style indéfini. Pourquoi? 🙂

  • Dans le navigateur?
  • quel navigateur vous utilisez ??
  • Derniers FF, 17.0.1
  • La version de IE moins de 9 ne prend pas en charge cette propriété
InformationsquelleAutor user1632298 | 2013-01-15
  1. 7

    Vous ne devez jamais utiliser un pour-en boucle pour que. 

    document.getElementsByClassName('someClass')

    renvoie une NodeList, qui n'héritent pas de Array.prototype, mais il est similaire à certains aspects. C'est une liste de nœuds, tout comme le nom le dit. Cela signifie qu'il a length propriété et ne doit être accessible à l'aide d':

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

    Et voici comment vous devez cachent en réalité un élément.

    /**
 * 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. 4
    for(var i = 0; i < divs.length; i++) {
         divs[i].style.display = "none";
      }

    EDIT: dans les boucles sont utilisées pour faire une boucle dans les propriétés de l'objet

    InformationsquelleAutor karaxuna
  3. 1

    Remplacer 

    for(var div in divs) {

    avec

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

    divs, le résultat de getElementsByClassName, n'est pas vraiment un tableau, mais une NodeList, un tableau comme objet et que vous avez été une itération sur ses propriétés, et non ses éléments.

    InformationsquelleAutor Denys Séguret
  4. -2

    Assurez-vous que tous les éléments de votre for-in boucle sont des éléments du DOM. C'est une bonne pratique pour filtrer for-in boucle avec un hasOwnProperty():

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