JavaScript 操作要素の例

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';
            }
        }
    </スクリプト>
</本文>

要約する

JavaScript操作要素に関するこの記事はこれで終わりです。より関連性の高いjs操作要素コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明
  • JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明
  • jsは2つのjson配列を操作して、マージ、重複の削除、特定の要素の削除を行います。
  • vue.jsのクリックイベントは現在の要素オブジェクトの操作を取得します
  • JavaScript HTML DOM要素(ノード)の追加、編集、削除操作例の分析
  • JS ドキュメント フォーム フォーム要素操作の完全な例
  • JavaScript操作要素の共通メソッドのまとめ
  • JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

<<:  Ubuntu E: ロック /var/lib/dpkg/lock-frontend を取得できません - オープン (11: リソースが一時的に利用できません)

>>:  MySQL 圧縮パッケージ版 zip インストール設定方法

推薦する

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

Dockerでudpポート番号を指定する問題を解決する

Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...

CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)

1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...

Mysql系SQLクエリ文の書き順と実行順を詳しく解説

目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...

Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...

MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明

1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

バックグラウンド コントローラー @RequestMapping("/getPDFStre...

MySQLデータベースを誤って削除した後にデータを回復するための手順

日々の運用・保守作業において、MySQL データベースのバックアップは重要です。ウェブサイトにとって...

49 個の JavaScript のヒントとコツ

目次1. js整数の演算2. ネイティブアラートを書き換えてポップアップボックスの数を記録する3. ...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント

1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...