ホームページ  >  記事  >  ウェブフロントエンド  >  色の変更方法_html/css_WEB-ITnose

色の変更方法_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:03:491017ブラウズ

ここには 3 つあります

<span>a</span><span>b</span><span>c</span>

一度クリックするとテキストが赤くなり、もう一度クリックすると黒になります
もう 1 つのポイントは、最初のものをクリックすると赤くなり、次に2 つ目、3 つ目はまだ赤のままですが、いずれかをクリックすると黒に戻ります

ディスカッションへの返信 (解決策)
これが望む結果かどうかを確認してください:

完全なコード:

var div = document.getElementById('div');var span = div.getElementsByTagName('span');for(var i = 0; i < span.length; i++){    span[i].onclick = function(){        if(this.className.length){            this.className = '';        } else {            this.className = 'red';        }    }}


        test    
<span>a</span><span>b</span><span>c</span>
<script> (function(){ var div = document.getElementById('div'); var span = div.getElementsByTagName('span'); for(var i = 0; i < span.length; i++){ span[i].onclick = function(){ if(this.className.length){ this.className = ''; } else { this.className = 'red'; } } } }());</script>
これが望むものであるかどうかを確認してください。 結果:

完全なコード:

var div = document.getElementById('div');var span = div.getElementsByTagName('span');for(var i = 0; i < span.length; i++){    span[i].onclick = function(){        if(this.className.length){            this.className = '';        } else {            this.className = 'red';        }    }}


これが効果です、ありがとうございます

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。