JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

1.1. 要素コンテンツの変更
1.2. innerText と innerHtml の違い
1.3. 要素を操作して要素の属性を変更する
1.4、時間表示例
1.5. フォーム属性の操作
1.6. 京東のパスワード表示と非表示の操作の模倣
1.7. スタイル属性の操作
1.8. QRコードの表示と非表示

要約する

1. 操作要素

ここに画像の説明を挿入

1.1. 要素コンテンツの変更

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <button>現在のシステム時刻を表示</button>
    <div>いつか</div>
    <p>123</p>
    <スクリプト>
        // 1. Anne の div をクリックすると、テキストが変更されます // (1) 要素を取得します var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // (2) イベントを登録する btn.onclick = function(){
            div.innerText = getDate();
        }
        関数 getDate(){
            // 例: 現在のシステム時刻を取得します 2021 年 11 月 24 日水曜日 var date = new Date();
            var 年 = date.getFullYear();
            var 月 = date.getMonth()+1;
            日付を取得します。
            var arr = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
            var day = date.getDay();
            '今日は:' + 年 + '年' + 月 + '月' + 日付 + '日' + arr[日] を返します。
        }
        // 2. イベントを登録せずに表示できます var p = document.querySelector('p');
        p.innerHTML = getDate();
    </スクリプト>
</本文>
</html>

1.2. innerText と innerHtml の違い

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <div></div>
    <p>
        私はテキスト<span>123</span>です
    </p>
    <スクリプト>
        // innerText と innerHtml の違い // 1. innerText は HTML タグを認識しませんが、innerHtml は HTML タグを認識します var div = document.querySelector('div');
        div.innerText = '<strong>今日は:</strong> 2021';
        // innerHtml は HTML タグを識別します (W3C 標準) // div.innerHTML = '<strong>Today is: </strong>2021';
        // 2. これら 2 つの属性は読み取りおよび書き込み可能であり、要素内のコンテンツを取得できます var p = div.innerHTML = document.querySelector('p');
        // innerText はスペースと改行を削除します console.log(p.innerText);
        コンソールにログ出力します。
    </スクリプト>
</本文>
</html>

1.3. 要素を操作して要素の属性を変更する

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <button id="ldh">アンディ・ラウ</button>
    <button id='zxy'>ジャッキー・チュン</button>
    <img src='images/ldh.jpg' alt="" title="アンディ・ラウ">
    <スクリプト>
        // 要素属性 src を変更する
        // 1. 要素を取得する var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. イベントハンドラを登録する zxy.onclick = function(){
            画像を保存する
            img.title = "ジャッキー・チュン";
        }
        ldh.onclick = 関数(){
            画像を拡大
            img.title="アンディ・ラウ";
        }
    </スクリプト>
</本文>
</html>

1.4、時間表示例

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        画像{
            幅: 300ピクセル;
        }
    </スタイル>
</head>
<本文>
    <img src = "images/s.gif" alt="">
    <div id="div">おはようございます、コードを上手に書いてください</div>
    <スクリプト>
        var img = document.querySelector('img');
        var div = document.getElementById('div');
        // 現在のシステム時刻を取得します。var time = new Date();
        var h = time.getHours();
        h < 12の場合{
            画像を拡大
            div.innerHTML = "おはようございます。コードを書いてください";
        }そうでない場合(h < 18){
            画像のサイズは 'size.src' のようになります。
            div.innerHTML = "こんにちは。コードを書いてみてください";
        }それ以外{
            画像を拡大
            div.innerHTML = "こんばんは、コードを書いてください";
        }
    </スクリプト>
</本文>
</html>

1.5. フォーム属性の操作

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <button>ボタン</button>
    <input type="text" value="入力内容"/>
    <スクリプト>
        // 1. 要素を取得する var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. イベントハンドラを登録する btn.onclick = function(){
            // input.innerHTML = 'clicked'; これは、div タグ内のコンテンツなどの一般的なジョイントベンチャーです // フォーム内の値テキストコンテンツは値によって変更されます input.value = 'clicked';
            // フォームを無効にして、無効になっている部分をクリックできなくしたい場合は、このボタンを無効にします // btn.disabled = true;
            this.disabled = true;
            // これはイベント関数の呼び出し元を参照します}
    </スクリプト> 
</本文>
</html>

1.6. 京東のパスワード表示と非表示の操作の模倣

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。箱 {
            位置: 相対的;
            幅: 400ピクセル;
            下境界線: 1px 実線 #ccc;
            マージン: 100px 自動;
        }
        .box入力{
            幅: 370ピクセル;
            高さ: 30px;
            境界線: 0;
            アウトライン: なし;
        }
        .box 画像 {
            位置: 絶対;
            上: 5px;
            右: 7px;
            幅: 24px;
        }
    </スタイル>
</head>
<本文>
    <div class="box">
        <ラベルの="">
            <img src="images/close.png" id="目">
        </ラベル>
        <input type="password" name="" id="pwd"></input>
    </div>
    <スクリプト>
        // 1. 要素を取得する var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. イベント ハンドラーを登録します。var flag = 0;
        eye.onclick = 関数(){
            // 一度クリックした後、フラグを操作する必要があります if (flag == 0) {
                pwd.type = 'テキスト';
                eye.src="images/open.png";
                flag = 1; //代入演算}else{
                pwd.type='パスワード';
                eye.src="images/close.png";
                フラグ = 0;
            }
        }
    </スクリプト>
</本文>
</html>

ここに画像の説明を挿入

1.7. スタイル属性の操作

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: ピンク;
        }
    </スタイル>
</head>
<本文>
    <div></div>
    <スクリプト>
        // 1. 要素を取得する var div = document.querySelector('div');
        // 2. イベントハンドラを登録する div.onclick = function() {
            this.style.backgroundColor = '紫';
            this.style.width = '250px';
        }
    </スクリプト>
</本文>
</html>

1.8. QRコードの表示と非表示

キーポイント: display:noneを変更する

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <div クラス = "close-btn" スタイル = "display: block;">
        <img src = "images/ewm.png" id = "img">
    </div>
    <スクリプト>
        // 1. 要素を取得する var btn = document.querySelector('.close-btn');
        var img = document.querySelector('img');
        // 2. イベント処理を登録する btn.onclick = function(){
            btn.style.display = 'なし';
        }
    </スクリプト>
</本文>
</html>