javascript：将classList替换为条件答案

【问题标题】：javascript: replace classList that is into a conditionaljavascript：将classList替换为条件
【发布时间】：2018-05-17 21:42:51
【问题描述】：

我想随时更改 div 的类，不管它有什么类。如果 div 有“mystyle”类，我希望它变成“mystyle1”，反之亦然。我的代码是这样的：

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    if (x.classList.contains("mysyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } if (x.classList.contains("mysyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>

当我们按下按钮时，它必须随时更改 css 样式。但事实并非如此。我认为问题与条件（classList.contains）和classList.replace的混合有关，因为我是单独做的并且它有效。

你知道我的问题是什么吗？谢谢。

【问题讨论】：

你在这里拼错了 :if (x.classList.contains("mysyle")) { x.classList.replace("mystyle", "mystyle1"); } if (x.classList.contains("mysyle1")) { x.classList.replace("mystyle1", "mystyle"); }
现在试试，我刚刚更正了它

标签： javascript html css replace contains

【解决方案1】：

几件事：

你会在 x.classList.contains() 中拼错 mystyle；
您的第二个 if 语句应该是 else-if。这是因为它更改了类，并再次检查新类，从而重置它。

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    if (x.classList.contains("mystyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } else if (x.classList.contains("mystyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>

【讨论】：

你是对的。我修复了我的代码，但它仍然无法正常工作。当我运行它时出现这个错误：错误：{“消息”：“脚本错误。”，“文件名”：“”，“lineno”：0，“colno”：0}我不知道它是什么意思

【解决方案2】：

这是你的代码..

    <!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    /*Here you missspelled "mystyle"*/
    if (x.classList.contains("mystyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } else if (x.classList.contains("mystyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>

【讨论】：

提供一些关于您的答案以及它如何/为什么可以解决问题的见解总是一个好主意。
你是对的。我修复了我的代码，但它仍然无法正常工作。

【解决方案3】：

我不确定您使用的是哪个浏览器，但我注意到 Internet Explorer 的 classList.replace 存在问题。对我有用的是逐个删除和添加类。

干杯！

【讨论】：