Pourquoi cette affectation de classe ne fonctionne pas dans IE

J'ai écrit ce morceau de code, cela fonctionne très bien dans FF et Chrome mais pas dans IE. Pourquoi est-ce?Pourquoi cette affectation de classe ne fonctionne pas dans IE

<html> 
    <header> 
     <style type="text/css"> 
      .red{ 
       color: red; 
      } 
      .green{ 
       color: green; 
      } 
      .yellow{ 
       color: yellow; 
      } 
     </style> 
    </header> 
    <body> 
     <div id="mydiv" style="height: 50px">Some contents</div> 
     <div> 
      <input type="radio" value="1" name="change" onclick="onClick(this)">Red</input> 
      <input type="radio" value="2" name="change" onclick="onClick(this)">Green</input> 
      <input type="radio" value="3" name="change" onclick="onClick(this)">Yellow</input> 
     </div> 
     <script type="text/javascript"> 
      function onClick(el){ 
       var className = ""; 
       if(el.value == 1){ 
        className = "red"; 
       }else if(el.value == 2){ 
        className = "green"; 
       }else if(el.value == 3){ 
        className = "yellow"; 
       } 

       document.getElementById("mydiv").setAttribute("class", className); 
      } 
     </script> 
    </body> 
</html>

Source

2010-12-22 Arun P Johny

IE ne prend pas en charge la méthode setAttribute pour l'attribut de classe.

Vous pouvez résoudre ce problème en utilisant document.getElementById("mydiv").className = className; au lieu de document.getElementById("mydiv").setAttribute("class", className);.

Mais je pense que si vous utilisez un cadre comme jQuery vous pouvez oublier ce genre de problèmes de compatibilité de navigateur.

<html> 
    <header> 
     <style type="text/css"> 
      .red{ 
       color: red; 
      } 
      .green{ 
       color: green; 
      } 
      .yellow{ 
       color: yellow; 
      } 
     </style> 
    </header> 
    <body> 
     <div id="mydiv" style="height: 50px">Some contents</div> 
     <div id="ctrls"> 
      <input type="radio" value="1" name="change" divClass="red">Red</input> 
      <input type="radio" value="2" name="change" divClass="green">Green</input> 
      <input type="radio" value="3" name="change" divClass="yellow">Yellow</input> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var mydiv = $("#mydiv"); 
       var myctrls = $("#ctrls").delegate("input[name='change']", "click", function(e){ 
        var el = $(e.currentTarget); 
        mydiv.removeClass(mydiv.attr("class")).addClass(el.attr("divClass")); 
       }); 
      }); 
     </script> 
    </body> 
</html>

Source

2010-12-22 03:34:01

Ou peut-être même .className + = "" + className; ? – danjah

@Danjah mais nous devons alors supprimer la classe déjà affectée dans ce cas. Nous devons donc obtenir toutes les classes affectées puis supprimer la classe précédente puis ajouter la classe actuelle. –

Pour ce que ça vaut, IE prend en charge setAttribute. [Vous devez le dire à setAttribute ('className') au lieu de setAttribute ('class').] (Http://www.digitalmediaminute.com/article/1394/the-browser-dom-and-the-class- attribut) – sdleihssirhc

Arun est correct à propos de la solution étant .className à la place. En plus de cela, je simplifierais un peu les choses avec une carte d'objet, comme ceci:

var classMap = { "1":"red", "2":"green", "3":"yellow" }; 
function onClick(el){ 
    document.getElementById("mydiv").className = classMap[el.value]; 
}

Source

2010-12-22 03:39:04

Je pense que c'est une meilleure idée. Je vais mettre à jour ma solution jquery basée sur ce –

@Arun - juste copier d'autres réponses complètement différentes dans votre propre ....? –

Désolé, je pensais que la solution jquery était différente. Un complètement différent. Je vais revenir sur ma réponse –

Pourquoi cette affectation de classe ne fonctionne pas dans IE

Répondre

Questions connexes