「The Art of DOM Programming」に実装されている暫定画像ライブラリの概要 (1)_html/css_WEB-ITnose

序文: 著者は、書籍「The Art of DOM Programming」の中で、画像ライブラリを作成する例を挙げています。実際、その機能はリスト項目をクリックすると、対応する画像と画像が表示されます。説明は以下に表示されます（画像の説明はタイトルの形式で事前に HTML で記述されています）。これは単純な例ですが、著者は徐々に本の中でさまざまな知識を導入し、画像ライブラリを継続的に改善していきました。良い本です。レビューです。この例では、いくつかの概要を示します。

－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－

1. HTML 部分

CSS スタイル

rree

3. js コード

    <h1 id="电影天堂">电影天堂</h1>    <ul>        <li>            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>        </li>        <li>            <a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>        </li>        <li>            <a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>        </li>        <li>            <a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>        </li>    </ul>    <!--占位符图片-->    <img src="/static/imghwm/default1.png"  data-src="images/placeholder.jpg"  class="lazy"  id="placeholder" alt="hehehe">    <!--一段描述-->    <p id="description">选择一张图片</p>

4. 概要

1. まず、画像の href 属性を取得します:

whatpic.getAttribute("href")

2. 次に、プレースホルダー画像のノードを取得します: document.getElementById ( "placeholder")

3. 次に、プレースホルダー画像の src 属性を設定します:

placeholder.setAttribute("src" , source)

4. 次に、プレースホルダー画像の下のテキストを操作し、タイトル値を変更します。

タグの nodeValue

var text = whatpic.getAttribute("title")
var description = document.getElementById("description")
description.first子供。 nodeValue = text
childNode を通じてノードのすべての子ノードを取得し、nodeType 属性を使用して判断できます。1 は要素ノードを表し、2 は属性ノードを表し、3 はテキスト ノードを表します。たとえば、

タグは子ノードのみなので、fistChild または childNode[0] を使用してノードを取得した後、nodeValue を使用してノードの属性値を取得します。

5. onclick 処理イベントを追加します

これは単なる基本的な例なので、関数処理イベントは HTML コード内にネストされており、リンクをクリックする (新しいページにジャンプする) というデフォルトの動作を防ぐために、後で返す必要があります。 false を指定します。

        h1{            color: #333;        }        a{            color: gray;            font-weight: bold;            text-decoration: none;        }        ul{            padding: 0;        }        li{            float: left;            padding: 1em;            list-style-type: none;        }        img{            display: block;            clear: both;        }

6. 欠点

クリックイベントは HTML コードにバインドされており、非常に面倒です。これは次の記事でアップグレードされます。

7. 古いルール、完全なソースコードを投稿してください