要素を一度クリックすると白くなり、もう一度赤くクリックすると

-1

要素を白に変えてもう一度クリックすると質問があります。私はクロムを使う。また、どうやってそれをどうやって作るのか分かりませんので、詳しい返信をしたいと思います。要素を一度クリックすると白くなり、もう一度赤くクリックすると

<html> 
 
    <head> 
 
    <script> 
 
     var color = document.querySelectorAll('h1') 
 
     color.onclick = function(){ 
 
      if (this.style.backgroundColor == 'red') { 
 
      this.style.backgroundColor = 'white' 
 
      this.style.color = 'white' 
 
      } 
 
      if (this.style.backgroundColor == 'blue') { 
 
      this.style.backgroundColor = 'white' 
 
      this.style.color = 'white' 
 
      } 
 
      if (this.style.backgroundColor == 'white') { 
 
      this.style.backgroundColor = 'red' 
 
      this.style.color = 'red' 
 
      } 
 

 
     } 
 
    </script> 
 

 
    </body> 
 
</html>

（編集）私はスニペットを追加していなかったことを申し訳なく思って、私が編集してこれを追加しています。私はさらに詳細な説明をしたい、ありがとう。

出典

2017-10-19 John Hao

ようこそStackOverflow！私たちがあなたのお手伝いをするために、あなたの質問を更新して**関連コード**を[**最小で、完全で、検証可能な例**]で表示することができますか？（http://stackoverflow.com/ヘルプ/ mcve）。あなたの問題を解決するためにあなたが持っているものを知ってもらうことができれば助けになるでしょう（http://meta.stackoverflow.com/questions/261592）。詳細については、[**よくある質問をどうやるか**]（http://stackoverflow.com/help/how-to-ask）に関するヘルプ記事を参照して、サイトの[**ツアー**]（http://stackoverflow.com/tour）:) –

サンプルコードなしで何をしようとしているのか正確には分かりませんが、私があなたが正しくしようとしていることを理解して、クリック時に背景色を交互に表示しようとしています。

まず、ページ上の要素を選択します。その後、クリックハンドラを適用します。このクリックハンドラーの内部で、style propertyという条件で背景色をチェックしたいとします。色が赤の場合は、白に設定します。色が赤でない場合は赤に設定します。

これは、次の例で見ることができます。

var example = document.getElementById('example'); 
 
example.onclick = function() { 
 
    if (this.style.backgroundColor == 'red') { 
 
    this.style.backgroundColor = 'white' 
 
    } 
 
    else { 
 
    this.style.backgroundColor = 'red' 
 
    } 
 
}

<div id="example">Text</div>

は、この情報がお役に立てば幸い！ :)

出典

2017-10-19 03:41:21

これをすべての要素に行う方法はありますか？ –

はい。 ['.querySelectorAll（）']（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll）を使用してください。 –

何の代わりに？ –

要素を一度クリックすると白くなり、もう一度赤くクリックすると

答えて

関連する問題