Javascript 动态更改元素'；s类名称，并让它立即更改页面'；外表_Javascript_Css

Javascript 动态更改元素'；s类名称，并让它立即更改页面'；外表

javascript css

Javascript 动态更改元素'；s类名称，并让它立即更改页面'；外表,javascript,css,Javascript,Css,如何动态更改元素的类名并使其立即更改页面的外观在我展示代码片段之前，问题在于，id=“shutterWrapper”的部分保持隐藏，id=“noshutterWrapper”的部分保持可见 <head> <script type="text/javascript"> <!-- window.onload = function() { var element; element = document.getElementById("shutte

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

在我展示代码片段之前，问题在于，id=“shutterWrapper”的部分保持隐藏，id=“noshutterWrapper”的部分保持可见

<head> <script type="text/javascript">  </script> </head> <body> <section id="shutterWrapper" class="hide"> </section> <section id="noshutterWrapper" class="show"> </section>

您正在使用
element.class
，但需要的是
element.className
。尝试在代码中使用它
:

className
获取并设置指定元素的class属性的值
下面是一个应该可以工作的代码示例：

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

您的javascript有点不正常。您需要使用
element.className

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

你应该做这个把戏

整个“class”属性具有JavaScript属性（而不是
class
），在较新的浏览器中，您可以使用更方便的属性操作特定的条目
在较新的浏览器中：

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; } };
在旧浏览器中：

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%。。。最后剩下的故障是一个分秒闪烁，如下所述
在body中，我假设JS被关闭，并在body中放置一个显示id=noshutterWrapper的隐藏的id=shutterWrapper。我有上面的
，它有窗口。onload，其中我用hidden id=noshutterwrapper和showing id=shutterWrapper交换了两者
主体加载，id=noshutterWrapper显示一秒钟，随后它被隐藏，id=shutterWrapper显示，因为JS已启用
显示的noshutterWrapper的这一瞬间闪烁通过以下方式解决：
$（文档）.ready（函数（）{…}）
而不是window.onload=function（）{…}
闪烁消失了，我可以把这个
放在它所属的
中

问题100%解决
嗨，John，如果您觉得我们回答了您的问题，请不要忘记使用箭头将一些答案标记为“有用”，并使用复选标记将其中一个答案标记为“已接受”。如果您的问题尚未完全回答，请详细说明，以便我们进一步提供帮助！