getElementById("blah").classname = "whatever" 不工作答案

【问题标题】：getElementById("blah").classname = "whatever" Not workinggetElementById("blah").classname = "whatever" 不工作
【发布时间】：2010-07-02 20:58:51
【问题描述】：

嘿，我有一些我认为应该可以工作的代码（尽管我真的在这里摸不着头脑）——我只是想动态地更改 div 标签上的类名。

我正在尝试将 id 为“slider”的 div 类从“可见”更改为“隐藏”。这段代码的其他一切都可以正常工作，但类不会改变。我做错了什么？

我已尝试检查浏览器是否正确评估 IE 6 - 确实如此。 if 语句第一部分中的代码在不是 IE6 时初始化滑块的工作。如果我用其他东西替换 document.getElementById，那么该代码也可以工作。所以我调用getElementbyId的方式一定有问题吗？它在 IE6 中什么也不做。

这是我得到的：

<script type="text/javascript">


$(window).load(function() {
var isIE6 = false;
        if(/MSIE 6/i.test(navigator.userAgent)) {
          isIE6 = true;
        }

    if(!isIE6)
    {

 $('#slider').nivoSlider({
  effect:'fade', 
  slices:1,
  animSpeed:500,
  pauseTime:3000,
  startSlide:0, 
  directionNav:false,
  directionNavHide:true, 
  controlNav:true,
  controlNavThumbs:false,
      controlNavThumbsFromRel:false, 
  controlNavThumbsSearch: '.jpg', 
  controlNavThumbsReplace: '_thumb.jpg', 
  keyboardNav:true, 
  pauseOnHover:true, 
  manualAdvance:false, 
  captionOpacity:0.8
 });
 }
 else 
 {
 document.getElementById('slider').className = "hidden"; 
 }
});
</script>



<div id="slider" class="visible">
  <img src="/img/nivoslider/slide1.jpg" />
  <img src="/img/nivoslider/slide2.jpg" />
  <img src="/img/nivoslider/slide3.jpg"  />
</div><!-- end slider -->

【问题讨论】：

与您的问题并不真正相关，但您应该考虑在整个 IE6 测试中使用功能测试而不是浏览器嗅探。随着移动浏览器的爆炸式增长，通过它们的 JavaScript 实现来实现这个和那个，尝试和嗅探的方式太多了。只是一些思考的食物。

标签： javascript jquery

【解决方案1】：

如果你正在使用 jQuery，看起来你就是这样，为什么不这样做：

$('#slider').addClass('hidden').removeClass('visible')

这也引出了一个问题：为什么不酌情使用$('#slider').toggle() 或$('#slider').hide() 和$('#slider').show()？

【讨论】：

感谢您抽出宝贵时间回复 - 我非常感谢。我三个都试过了。第一个什么也没做——滑块上的类名保持不变。第二个和第三个不仅隐藏了滑块 div，还隐藏了页面的其余内容。想法？ IE6 / jquery 问题？
我们能看到更多你的 HTML 吗？有点不对劲。
你这么一说，我就非常仔细地翻阅了HTML。解决方案是：使用您的 $('#slider').hide() 脚本。然后我发现在滑块 div 之前打开的 div 从未关闭。虽然滑块 div 已正确关闭，但关闭其上方的 div 会导致正确隐藏 jquery 幻灯片 div。我想要你的代码宝贝，Ken，谢谢。

【解决方案2】：

只是一个问题：你怎么知道类名没有改变？您是否设置了 CSS 样式以匹配隐藏的类。

除此之外，如果类的唯一目的是改变可见性，为什么不直接改变呢？

document.getElementById('slider').visibility = "hidden";

如果所有这些都不起作用，并且您已经在使用 jQuery，请尝试使用

$("#slider").hide();

【讨论】：

感谢您的意见。我知道类名没有改变，因为我加载了 IE6，滑块 div a) 仍然可见，b) 当我查看源代码时，类仍然显示为可见。我确实尝试使用 .hide()，但奇怪的是隐藏了所有内容 - 滑块和 IE6 中滑块之后的所有内容。滑块 div 正确关闭。也许这指向一个额外的错误？
滑块 div 中的所有内容是否也正确关闭？并且改变可见性是否有效？您是否在 CSS 中定义了 .hidden？
查看源代码不是动态的。您需要像 Firebug 或 IE8+/Chrome/Safari 中的开发者工具这样的工具来检查当前状态。

【解决方案3】：

如果您想确保您正在更改课程，因此您不必进行添加/删除，而只想使用 jquery 进行替换，您可以这样做：

$('#slider').attr('class', 'hidden');

or

$('#slider').attr('class', 'visible');

这样至少你永远不会失去同步，它永远只是这些值之一。

【讨论】：