コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 色の変更方法_html/css_WEB-ITnose

色の変更方法_html/css_WEB-ITnose

WBOY
リリース： 2016-06-21 09:03:49
オリジナル
1058 人が閲覧しました

ここには 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';        }    }}
ログイン後にコピー
ログイン後にコピー


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

関連ラベル：
如何变换颜色
ソース：php.cn
前の記事：図解CSS3読書メモ --Selector_html/css_WEB-ITnose 次の記事：CSS を使用して 1 行のテキストを中央揃えにし、複数行を左に揃えるにはどうすればよいですか? _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
Vanilla JS を使用して clickEventListener を使用して赤と青を切り替える方法 まず、青と赤の 2 つの関数を作成します。 functiondrawBlueCircle(){ctx.fillStyle='blue';ctx.beginPath();ctx.ar...
から 2024-04-03 20:19:03
0
2
347
Ag-Grid: 行のデータに基づいてではなく、タイマーに基づいて行のスタイルを設定することは可能ですか? しばらくしてから行の背景色を変更する必要があります。グリッドに秒単位の時間を示す列があり、その時間が 50% 経過した後に行の色を変更する必要があります。グリッド自体のデータは変更...
から 2024-04-03 20:14:05
0
1
360
HTML でボックスに別の色を付けるにはどうすればよいですか? PS よりわかりやすくするために投稿を更新しました。内部アプリケーションと外部アプリケーションをマークするために、HTML のボックスに異なる色を指定するにはどうすればよいですか?...
から 2024-04-02 23:21:49
0
1
302
Web サイトの色の変化をテストするにはどうすればよいですか? 要件に従って、10 個の特定の色を新しい色に置き換えたいと考えています (例: #ddd を #000 に置き換えます。このように別の置き換えを行います)。すべての CSS ファイ...
から 2024-04-01 15:21:14
0
1
244
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート