Question

如何动态更改元素的类名并让立即更改页面的外观

在我提交代码段之前，问题是，id =“shutterWrapper”的部分保持隐藏，而id =“noshutterWrapper”的部分仍然可见。

<head>

<script type="text/javascript">
<!--

window.onload = function() {

    var element;

    element = document.getElementById("shutterWrapper");
    element.class = "show";

    element = document.getElementById("noshutterWrapper");
    element.class = "hide";

}

-->
</script>

</head>

<body>

<section id="shutterWrapper" class="hide">

</section>

<section id="noshutterWrapper" class="show">

</section>

在我的.css文件中：

.show {
    display: block;
}

.hide {
    display: none;
}

Answer 1

你的javascript略有偏差。您需要使用element.class

，而不是element.className

<script type="text/javascript">
<!--

window.onload = function() {

    var element;

    element = document.getElementById("shutterWrapper");
    element.className = "show";

    element = document.getElementById("noshutterWrapper");
    element.className = "hide";

}

-->
</script>

应该做的伎俩！

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

Answer 2

您使用的是element.class，但您想要的是element.className。请尝试在代码中使用它！

From MDN's entry on className：

className获取并设置指定元素的class属性的值。

以下是您的代码应该有效的示例：

window.onload = function() {

    var element;

    element = document.getElementById("shutterWrapper");
    element.className = "show";

    element = document.getElementById("noshutterWrapper");
    element.className = "hide";

}

Answer 3

整个＆＃34;班级＆＃34; attribute具有JavaScript属性className（不是class），在较新的浏览器中，您可以使用更方便的classList属性来操作特定条目。

在较新的浏览器中：

 var setVisible = function(element, isVisible) {
    if (isVisible) {
       element.classList.remove('hidden');
     } else {
       element.classList.add('hidden');
     }
  };

在旧版浏览器中：

 var setVisible = function(element, isVisible) {
    var classNameWithoutHidden =
       element.className.replace(/hidden\s+/, '');
    if (isVisible) {
       element.className = classNameWithoutHidden + ' hidden';
     } else {
       element.className = classNameWithoutHiden;
     }
  };

Answer 4

我发现了一些东西，即：

element.setAttribute("class", "show");   // or, element.className = "show"

现在，感谢大家，问题是 99％已解决 ...最后一次故障 分秒闪烁如下所述。

在体内，我假设JS已经关闭并在身体中放入显示 id = noshutterWrapper和隐藏 id = shutterWrapper 。我的<script>上面有 window.onload ，其中我将两者交换为隐藏ID = noshutterwrapper并显示id = shutterWrapper。

正文加载并且id = noshutterWrapper会暂时显示，然后隐藏它并显示id = shutterWrapper，因为JS已启用。

显示的noshutterWrapper的第二次闪烁通过以下方式解决：

$（document）.ready（function（）{...}）

而不是window.onload = function（）{...}

闪烁消失了，我可以将<script>放在它所属的<header>。

问题100％解决了！

动态更改元素的类名，并让它立即更改页面的外观

4 个答案: