スキン効果を実現するJavaScript（背景の変更）

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

スキン変更効果: 別の画像をクリックすると、対応するページの背景が変更されます

実装のアイデア

1. 画像セットを定義し、各src属性に背景画像のパスを割り当てます。
2. 画素オブジェクトのセットを取得する（疑似配列を取得する）
3. for ループはクリックイベント onclick を画像にバインドします。イベントハンドラーでは、body 要素オブジェクトの背景画像が現在クリックされている画像のパスに設定されます。
4. 注意: body 要素のオブジェクトは - - -document.body として取得され、js には背景画像のパスが割り当てられます。パスの連結に注意してください - - -document.body.style.backgroundImage = 'url(' + this.src + ')';

コードサンプル

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>スキン効果</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        
        体 {
            背景: url(images/壁纸1.jpg) 繰り返しなし 中央 上;
            背景サイズ: カバー;
        }
        
        。箱 {
            オーバーフロー: 非表示;
            幅: 610ピクセル;
            マージン: 100px 自動;
            背景色: #fff;
        }
        
        .box li {
            幅: 25%;
            高さ: 100px;
            リストスタイル: なし;
            フロート: 左;
            カーソル: ポインタ;
            境界線: 1px 実線 #fff;
        }
        
        画像 {
            幅: 100%;
            高さ: 100%;
        }
    </スタイル>
</head>

<本文>
    <ul class="box">
        <li><img src="images/壁纸1.jpg" alt=""></li>
        <li><img src="images/壁纸2.jpg" alt=""></li>
        <li><img src="images/壁纸3.jpg" alt=""></li>
        <li><img src="images/壁纸4.jpg" alt=""></li>
    </ul>
    <スクリプト>
        var pics = document.querySelector('.box').querySelectorAll('img');
        console.log(写真);
        (var i = 0; i < pics.length; i++) の場合 {
            pics[i].onclick = 関数() {
                コンソールにログ出力します。
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </スクリプト>
</本文>

</html>