JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、イベント、操作要素

大文字と小文字: 隠されたパスワードの大文字と小文字を表示する

コアアイデア: (フォーム要素の属性を操作する)

目のボタンをクリックして、パスワードボックスの種類をテキストボックスに変更すると、内部のパスワードが見えるようになります。1 つのボタンに 2 つの状態があります。
一度クリックするとテキストボックスに切り替わり、もう一度クリックするとパスワードボックスに切り替わります。
アルゴリズム: フラグ変数を使用してフラグ値を決定します。 1 の場合は、テキストボックスに切り替えてフラグを 0 に設定します。 0 の場合は、パスワードボックスに切り替えてフラグを 1 に設定します。

<スタイル>
    。箱{
        位置: 相対的;
        幅: 400ピクセル;
        下境界線: 1px 実線 #ccc;
        マージン: 100px 自動;
    }
    .box 入力{
        幅: 370ピクセル;
        高さ: 30px;
        境界線: 0;
        アウトライン: なし;
    }
    .box 画像{
        位置:絶対;
        上: 2px;
        右: 2px;
        幅: 24px;
    }
</スタイル>
<本文>
    <div class="box">
        <ラベルの="">
            <img src="./image/close.png" alt="" id="目">
        </ラベル>
        <input type="password" name="" id="pwd">
    </div>
    <スクリプト>
        var 目 = document.getElementById('目')
        var pwd = document.getElementById('pwd')
        varフラグ=0
        eye.onclick=関数(){
        	//クリック後にテキストボックスの種類、画像、タグ値を変更する if(flag==0){
                pwd.type = 'テキスト'
                eye.src='./image/open.png'
                フラグ=1 
            }それ以外{
                pwd.type = 'パスワード'
                フラグ=0
            }
        }
    </スクリプト>
</本文>

例: スプライトの循環

コアアイデア: (操作要素スタイル)

forループを使用してスプライト画像の背景位置を変更します
background-positionはループ内のiインデックス番号*44を各画像のy座標にします

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
    }
    li{
        リストスタイルタイプ: なし;
    }
    。箱{
        幅: 250ピクセル;
        マージン: 100px 自動;
    }
    .box li{
        マージン: 15px;
        フロート: 左;
        幅: 24px;
        高さ: 24px;
        背景: url(./image/sprite.png) 繰り返しなし;
    }
</スタイル>
<本文>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <スクリプト>
        // 1. 要素の小さいliをすべて取得する 
        var lis = document.querySelectorAll('li');
        (var i = 0; i < lis.length; i++) の場合 {
            // インデックス番号に 44 を掛けて、各 li の背景の y 座標を取得します。var y = i * 44;
            lis[i].style.backgroundPosition = '0 -' + y + 'px';
        }
    </スクリプト>
</本文>

ケース: パスワードボックスの検証情報

コアアイデア: (className を使用してスタイル属性を変更する)

最初に判断されるのは、フォームがぼやけて焦点が失われることです。
入力が正しければ、小さな緑色のアイコンとともに正しい情報が表示されます。
入力が 6 ～ 16 桁でない場合は、小さな赤いアイコンとともにエラーメッセージが表示されます。
変更可能なスタイルは多数あるため、classNameを使用してスタイルを変更します。

<スタイル>
    div {
        幅: 600ピクセル;
        マージン: 100px 自動;
    }
    。メッセージ {
        表示: インラインブロック;
        フォントサイズ: 12px;
        色: #999;
        背景: url(./image/mess.png) 繰り返しなし 左中央;
        左パディング: 20px;
    }
    。間違っている {
        色: 赤;
        背景画像: url(./image/wrong.png);
    }
    。右 {
        色: 緑;
        背景画像: url(./image/right.png);
    }
</スタイル>
<本文>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">6～16 桁のパスワードを入力してください</p>
    </div>
    <スクリプト>
        var ipt = document.querySelector('.ipt')
        var メッセージ = document.querySelector('.message')
        ipt.onblur = 関数（）{
            （この値の長さが6未満の場合 || この値の長さが16超の場合）{
                messgae.className = 'メッセージが間違っています'
                messgae.innerHTML = '入力内容が正しくありません。6～16 桁の数字が必要です。'
            } それ以外 {
                messgae.className = 'メッセージ右'
                messgae.innerHTML = '入力内容は正しいです'
            }
        }
    </スクリプト>
</本文>

1749.png)

事例：背景色の変更

コアアイデア: (操作要素のスタイル属性)

ループ内の 4 つの小さな画像のクリックイベントを登録します。この画像をクリックすると、ページの背景が現在の画像に変更されます。コアアルゴリズム: 現在の画像の src パスを取得し、それを本文の背景として設定します。

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
    }
    体{
        背景: url(./image/1.jpg) 繰り返しなし 中央 上;
    }
    li{
        リストスタイルタイプ: なし;
    }
    .tu{
        オーバーフロー: 非表示;
        マージン: 100px 自動;
        背景色: #fff;
        幅: 410ピクセル;
        パディング上部: 3px;
    }
    .tu li{
        フロート: 左;
        マージン: 0 1px;
        カーソル: ポインタ;
    }
    .tu 画像{
        幅: 100ピクセル;
    }
</スタイル>
<本文>
    <ul class="tu">
        <li><img src="./image/1.jpg"></li>
        <li><img src="./image/2.jpg"></li>
        <li><img src="./image/3.jpg"></li>
        <li><img src="./image/4.jpg"></li>
    </ul>
    <スクリプト>
        //要素を取得する var imgs = document.querySelector('.tu').querySelectorAll('img');
        //イベントを登録 for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=関数(){
                // this.src 本体へのパス
                document.body.style.backgroundImage='url('+this.src+')';
            }
        }
    </スクリプト>
</本文>

事例：テーブルの色の変更

核となるアイデア: (排他的思考)

新しいマウスイベントを使用します: マウスが通過すると onmouseover、マウスが離れると onmouseout。基本的なアイデア: マウスが tr 行を通過すると、現在の行の背景色が変更され、マウスが離れると、現在の背景色が削除されます。注: 最初の行 (thead 内の行) は色を変更する必要がないため、tbody 内の行が取得されます。

<スタイル>
    テーブル{
        幅:800ピクセル;
        マージン: 100px 自動;
        テキスト配置: 中央;
        境界線の折りたたみ: 折りたたみ;
        フォントサイズ: 14px;
    }
    スレッドtr{
        高さ: 30px;
        背景色: スカイブルー;
    }
    tbody tr{
        高さ: 30px;
    }
    tボディtd{
        下境界線: 1px 実線 #d7d7d7;
        フォントサイズ: 12px;
        色: 青;
    }
    .bg{
        背景色: ピンク;
    }
</スタイル>
<本文>
    <テーブル>
        <頭>
            <tr>
                <th>コード</th>
                <th>名前</th>
                <th>最新の公表純資産</th>
                <th>累積純価値</th>
                <th>前ユニット純額</th>
                <th>純資産成長率</th>
            </tr>
        </thead>
        <t本文>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>中国農業銀行 金水 3ヶ月定期オープン債</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
        </tbody>
    </テーブル>
    <スクリプト>
        //要素を取得する var trs = document.querySelector('tbody').querySelectorAll('tr')
        //イベントを登録 for(var i=0;i<trs.length;i++){
            trs[i].onmouseover=関数(){
                this.className='bg'
            }
            trs[i].onmouseout=関数(){
                this.className=''
            }
        }
    </スクリプト>
</本文>

ケース: フォーム内ですべて選択およびすべて選択解除する

中心的なアイデア:

すべてを選択または選択解除するには、すべてのチェックボックスのチェック属性（選択状態）を、すべて選択ボタンに従うように設定します。
すべてのチェックボックスをオンにする必要があります。すべてを選択するには、クリックイベントを下のすべてのチェックボックスにバインドします。クリックするたびに、下のすべてのチェックボックスをループして、オンになっていないチェックボックスがあるかどうかを確認します。オンになっていないチェックボックスが 1 つでもあると、上のすべてはオンになりません。
すべての選択項目が選択されているかどうかを制御する変数を設定できます

<スタイル>
    *{
        パディング: 0;
        マージン: 0;
    }
    。包む{
        幅: 300ピクセル;
        マージン: 100px 自動 0;
    }
    テーブル{
        境界線の折りたたみ: 折りたたみ;
        境界線の間隔: 0;
        境界線: 1px 実線 #c0c0c0;
        幅: 300ピクセル;
    }
    th、td{
        境界線: 1px 実線 #d0d0d0;
        色: #404060;
        パディング: 10px;
    }
    th{
        背景色: #09c;
        フォント: 太字 16px 'Microsoft YaHei';
        色: #fff;
    }
    td{
        フォント: 14px 'Microsoft YaHei';
    }
    tbody tr{
        背景色: #f0f0f0;
    }
    tbody tr:hover{
        カーソル: ポインタ;
        背景色: #fafafa;
    }
</スタイル>
<本文>
    <div class="wrap">
        <テーブル>
            <頭>
                <tr>
                    <番目>
                        <input type="チェックボックス" id="cbAll" />
                    </th>
                    <th>製品</th>
                    <th>価格</th>
                </tr>
            </thead>
            <tbodyid="tb">
                <tr>
                    <td>
                        <入力タイプ="チェックボックス" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <入力タイプ="チェックボックス" />
                    </td>
                    iPadプロ
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <入力タイプ="チェックボックス" />
                    </td>
                    iPad Air
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <入力タイプ="チェックボックス" />
                    </td>
                    <td>アップルウォッチ</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </テーブル>
    </div>
    <スクリプト>
        //要素を取得 var cbAll = document.getElementById('cbAll'); //すべてのボタンを選択 var tbs = document.getElementById('tb').getElementsByTagName('input'); //すべてのチェックボックスボタン //イベントを登録 //すべて選択 cbAll.onclick = function () {
            (var i = 0; i < tbs.length; i++) の場合 {
                tbs[i].checked = this.checked;
            }
        }
        //逆選択 for (var i = 0; i < tbs.length; i++) {
            tbs[i].onclick = 関数（）{
                var flag = true //すべて選択ボタンを制御する//チェックボックスをクリックするたびに、すべてが選択されているかどうかを確認します for (var i = 0; i < tbs.length; i++) {
                    tbs[i].checked == falseの場合{
                        フラグ = 偽
                        壊す
                    }
                }
                cbAll.checked = フラグ
            }
        }
    </スクリプト>
</本文>

事例: タブバーの切り替え

コアアイデア: (独占的アイデア)

タブバーの切り替えには2つの大きなモジュールがあります
上部のモジュールタブをクリックすると、現在のモジュールの背景色が赤になり、残りは変更されません（排他的なアイデア）クラス名を変更する方法
下のモジュールの内容は上のタブによって変わります。したがって、次のモジュールの変更がクリックイベントに書き込まれます。ルール：下のモジュールに表示される内容は、上のタブと1つずつ対応し、
コアアイデア: 上記の tab_list 内のすべての小さな li にカスタム属性を追加し、属性値は 0 から始まります。
tab_list 内の小さな li をクリックすると、tab_con 内の対応する番号の内容が表示され、残りは非表示になります (独自のアイデア)

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
    }
    li{
        リストスタイルタイプ: なし;
    }
    。タブ{
        幅:978ピクセル;
        マージン: 100px 自動;
    }
    .タブリスト{
        高さ: 39px;
        境界線: 1px 実線 #ccc;
        背景色: #f1f1f1;
    }
    .tab_list li{
        フロート: 左;
        高さ: 39px;
        行の高さ: 39px;
        パディング: 0 20px;
        テキスト配置: 中央;
        カーソル: ポインタ;
    }
    .tab_list .current{
        背景色: #c81623;
        色: #fff;
    }
    。アイテム{
        表示: なし;
    }
    .item_info{
        パディング: 20px 0 0 20px;
    }
</スタイル>
<本文>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">製品紹介</li>
                <li>仕様とパッケージ</li>
                <li>アフターセールス保証</li>
                <li>製品レビュー (50,000)</li>
                <li>モバイル コミュニティ</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                製品紹介モジュールコンテンツ</div>
            <div class="item">
                仕様とパッケージモジュールの内容</div>
            <div class="item">
                アフター保証モジュールコンテンツ</div>
            <div class="item">
                製品レビュー（50000）モジュールコンテンツ</div>
            <div class="item">
                モバイル コミュニティ モジュール コンテンツ</div>
        </div>
    </div>
    <スクリプト>
        //要素を取得します var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //イベントを登録する for (var i = 0; i < lis.length; i++) {
            //li要素のインデックス番号を設定します。lis[i].setAttribute('index', i);
            lis[i].onclick = 関数（）{
                //タブの内容 //liの現在のクラスをすべてクリア for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                //現在のクラスを自身に追加します this.className = 'current';

                //コンテンツを表示 var index = this.getAttribute('index');
                // 残りの項目の内容をクリアします for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'なし';
                }
                // 自身のアイテムの内容を表示します items[index].style.display = 'block';
            }
        }
    </スクリプト>
</本文>