爲什麼這個類的任務不在IE中工作

我已經寫了這個代碼片，這在FF和Chrome中可以正常工作，但在IE中不能。爲什麼？爲什麼這個類的任務不在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>

來源

2010-12-22 Arun P Johny

IE不支持class屬性的setAttribute方法。

您可以使用document.getElementById("mydiv").className = className;而不是document.getElementById("mydiv").setAttribute("class", className);來解決此問題。

但我認爲如果你使用像jQuery這樣的框架，你可以忘掉這些類型的瀏覽器兼容性問題。

<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>

來源

2010-12-22 03:34:01

或者甚至可能.className + =「」+ className; ？ – danjah 2010-12-22 03:37:05

@Danjah但在這種情況下，我們必須刪除已分配的類。所以我們需要得到所有分配的類，然後刪除以前的類然後添加當前類。 – 2010-12-22 03:39:05

Arun正確的解決方案是.className而不是。最重要的是，我用一個對象映射簡化了一些事情，像這樣：

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

來源

2010-12-22 03:39:04

爲什麼這個類的任務不在IE中工作

回答

相關問題