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

dynamically change an element's class name and have it immediately change the page's appearance

本文关键字：外观 元素 动态      更新时间：2023-09-26

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

在我呈现代码片段之前，问题是 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;
}

您使用的是element.class，但您想要的是element.className。试着在你的代码中使用它!

摘自MDN关于className的条目:

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

下面是你的代码应该工作的一个例子:

window.onload = function() {
    var element;
    element = document.getElementById("shutterWrapper");
    element.className = "show";
    element = document.getElementById("noshutterWrapper");
    element.className = "hide";
}

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

整个"class"属性具有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;
     }
  };

我发现了一些东西，即:

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

现在，感谢你们所有人，问题99%解决了…最后剩余的故障是一个秒闪，如下所述。

在主体中，我假设JS将关闭并在主体中放置显示 id = noshutterWrapper和隐藏 id = shutterWrapper。我有上面的<script>，有窗口。onload其中我将两者与隐藏id = noshutterwrapper和显示id = shutterWrapper交换。

body被加载，id = noshutterWrapper在一瞬间被显示，随后它被隐藏，id = shutterWrapper被显示，因为JS是启用的。

显示的noshutterWrapper的瞬间闪烁通过:

美元(文档)。Ready (function(){…})

而不是window。Onload = function(){…}

闪烁消失了，我可以把<script>放到<header>的位置。

问题100%解决!

相关文章：