JavaScriptで変更した属性の元の値の取得

質問

いつもお世話になっております。

ページの画像をとある条件で変更しようとしております。
HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。
JavaScriptでimg要素を取得し画像の変更は実現できております。
その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。
変更前の値の取得方法を教えてください。

■HTMLソースの一部
<p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p>

■JavaScriptの一部
function wid(){
var image=document.getElementsByTagName('img');
if(window.innerWidth>=320){
for(var i=0;i<image.length;i++){
image.item(i).src=image.item(i).getAttribute("data-mimage");
}
}else{
// ここに元の画像に戻すためのスクリプトを書きたい
}
}
}
wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。
次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。

img/moto.gifをimg/ato.gifに変更することは出来ます。
img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。

もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。

よろしくお願いします。

回答No.2

blue-goheimochi · ベストアンサー

回答No.1のt_ohta様のおっしゃるとおり、

＞書き換えてしまったものは取得できません。

ので、

＞JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

の通り、別途属性を作ってパスを保持しておくのが良いかと思います。

_rakuda_ のサンプルを少し修正させてもらいまして、
下記のような形はいかがでしょうか・・・？

function wid(){
var image=document.getElementsByTagName('img');
if( window.innerWidth>=320 ){
for(var i=0;i<image.length;i++){

// data-prev-imgがない場合、srcの値を data-prev-img に挿入する
if (!image.item(i).getAttribute("data-prev-img")) {
image.item(i).setAttribute('data-prev-img', image.item(i).getAttribute("src"));
}

image.item(i).src=image.item(i).getAttribute("data-mimage");

}
} else {
// ここに元の画像に戻すためのスクリプトを書きたい
// data-prev-imgの値をsrcに挿入する
image.item(i).src=image.item(i).getAttribute("data-prev-img");
}
}

上記の形だと、関数実行時にしか data-prev-img が作られませんので、
data-prev-imgが無い状態で else のほうに入ってきてしまうとエラーが出てしまうので、
onload時などページの読み込みが終わったタイミングで、
data-prev-img の設定を先にしてしまうのが処理の流れ的には良いかもしれないですね。

ご参考になれば幸いです。

お礼

複数の方から書き換え前の値は取れないとのご回答で心強いです。
ご回答ありがとうございます。

更にサンプルまでご提示ありがとうございます。
ほぼ同じもので希望の動作になりました。

いきなりelseのほうには言ってきたときの処理は変数flagを作ってifの処理の時にflag=1にして、elseをelse if(flag==1)で対応しました。

ありがとうございます。

回答No.1

t_ohta

書き換えてしまったものは取得できません。
JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

お礼

ご回答ありがとうございます。

for inで属性値をループさせたところ書き換え前の値が見当たらなかったので取れないのかなと思っていましたが、やはり無理だったのですね。

ありがとうございました。

書き換え前に別の属性値を作って残しておく方法にいたします。