Question

考虑以下示例：

<html>
<head>
</head>
<body>
<style type="text/css">
.hide
{
    display: none;
}
</style>
<button style="width:200;height:20;background-color:#B4CFEC;font: bold 10px Verdana" onclick="document.getElementById('CUST_CLASS').classList.remove('hide');" >CUSTOMER DIMENSION</button>
<div class="hide" id="CUST_CLASS">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</body>
</html>

我正在使用document.getElementById（'id'）。classList.remove（'class'）;功能在这里。我应该使用不同的功能吗？只有微软的东西？

Answer 1

这很可怕，但删除了指定的类，保留了所有其他类：

onclick="document.getElementById('CUST_CLASS').setAttribute('class', document.getElementById('CUST_CLASS').getAttribute('class').replace('hide', ''));"

如评论所述，IE9不支持classList，因此您可以对其进行填充，或者回退到可以处理浏览器兼容性的jQuery。这是与您的代码等效的jQuery：

$("#CUST_CLASS").removeClass("hide");

但是，如果您的hide类仅用于切换可见性，则可以进一步简化：

$("#CUST_CLASS").hide();
$("#CUST_CLASS").show();

显示隐藏的div，为什么代码在FF / Chrome中有效但在IE9中无效？

1 个答案: