操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、イベント、操作要素 大文字と小文字: 隠されたパスワードの大文字と小文字を表示するコアアイデア: (フォーム要素の属性を操作する)
<スタイル> 。箱{ 位置: 相対的; 幅: 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 } } </スクリプト> </本文> 例: スプライトの循環コアアイデア: (操作要素スタイル)
<スタイル> *{ マージン: 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 を使用してスタイル属性を変更する)
<スタイル> 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 = '入力内容は正しいです' } } </スクリプト> </本文> 事例:背景色の変更コアアイデア: (操作要素のスタイル属性) ループ内の 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='' } } </スクリプト> </本文> ケース: フォーム内ですべて選択およびすべて選択解除する中心的なアイデア:
<スタイル> *{ パディング: 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 = フラグ } } </スクリプト> </本文> 事例: タブバーの切り替えコアアイデア: (独占的アイデア)
<スタイル> *{ マージン: 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を応援してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu E: ロック /var/lib/dpkg/lock-frontend を取得できません - オープン (11: リソースが一時的に利用できません)
>>: MySQL 圧縮パッケージ版 zip インストール設定方法
セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...
バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...
1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...
この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...
なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...
序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...
1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...
この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体...
プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...
1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...
インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...
HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...