Question

我已经编写了这段代码，这在FF和Chrome中运行良好，但在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>

Answer 1

Arun对于.className的解决方案是正确的。最重要的是，我用对象贴图简化了一些事情，比如：

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

Answer 2

IE不支持类属性的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>

为什么这个类赋值在IE中不起作用

2 个答案: