javascript：条件にあるclassListを置き換えます。

divのクラスをいつでも変更したいのですが、クラスには何のクラスもありません。 divにクラス "mystyle"がある場合は、それを "mystyle1"に変更したいと思います。私のコードはこれです：javascript：条件にあるclassListを置き換えます。

<!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が混在していることがあると思います。

私の問題は何ですか？ありがとうございました。

出典

2017-12-04 Davids Zarzoso Moreno

です：{ x.classList（x.classList.contains（ "mysyle"））場合。 replace（ "mystyle"、 "mystyle1"）; （ "mystyle1"、 "mystyle"）; } } –

今すぐ試してみてください。それを修正しました。 –

いくつかのこと：

あなたはx.classList.containsでmystyleを（つづりの間違っだろう）。
2番目の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>

出典

2017-12-04 12:21:46 hjfitz

あなたは正しいです。コードを修正しましたが、それでも動作しません。エラー：{ "メッセージ"： "スクリプトエラー。"、 "ファイル名"： ""、 "LINENO"：0、 "COLNO"：0 }私はドン」私はそれを実行すると、このエラーが発生しますそれが意味することを知ってください –

Firefoxで動作します –

あなたのコードは、あなたがここにスペルミス..

<!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>

出典

2017-12-04 12:23:31

あなたの答えと、それがどうやって問題を解決するかについていくつかの洞察を提供することは、常に良い考えです。 –

あなたは正しいです。コードを修正しましたが、それでも動作しません。 –

今すぐ試してみてください –

javascript：条件にあるclassListを置き換えます。

答えて

関連する問題