javascript：将classList替换为条件
Posted
技术标签:
【中文标题】javascript：将classList替换为条件【英文标题】：javascript: replace classList that is into a conditional 【发布时间】：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"); 现在试试，我刚刚更正了它 【参考方案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 存在问题。 对我有用的是逐个删除和添加类。
干杯！
【讨论】：
以上是关于javascript：将classList替换为条件的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript“classList”切换不会切换元素的类名
Javascript-className与classList的区别
使用 javascript 进行表单验证 - event.target.form.classList 未定义 - css 技巧教程
[Javascript] Manipulate the DOM with the classList API