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 インストール設定方法

推薦する

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル

1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

Docker用国産イメージウェアハウスの使い方

1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

MySQLバックアップとリカバリの実践に関する詳細な説明

1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...

Vueはテーブルページング機能を実装します

この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体...

Linux での MySQL の文字化け問題の解決方法

プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...

jQueryはシンプルなボタンの色の変更を実装します

HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...