6

純粋な JavaScript でライトボックスを作成しています。現在、AJAX 経由で画像をロードしていますが、img data-src 属性をオンクリックで src に置き換える方が簡単であることはわかっています。

ただし、これが純粋な JavaScript でどのように行われるかはわかりません。つまり、ライブラリを使用しません。

誰がこれがどのように行われるか教えてもらえますか?

要約すると: どうすれば変更できますか ex:

<img data-src="URL"/>

に：

<img src="URL"/>

jQueryなし。

4

3 に答える 3

13

以下に示すように実行できます。

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
    }
}

上記のコードはすべてのimgタグを取得し、data-src属性があるかどうかを確認し、存在する場合は に置き換えますsrc。

デモフィドル

于 2013-10-12T11:33:08.010 に答える
7

画像要素のハンドルを取得し、srcからの値を使用してそのプロパティを設定しますgetAttribute()。

プレーンな Javascript には、属性を処理するためのヘルパー関数はありませんdata-*。属性を他の属性として扱うだけです。

var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");
于 2013-10-12T11:30:08.447 に答える