いつもお世話になっております。
ページの画像をとある条件で変更しようとしております。
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ベストアンサー
- 回答日時:
回答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)で対応しました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
プルダウン選択を変更すると、変更する前に戻るJavaScript
JavaScript
-
GROUP BYを行った後に結合したい。
Oracle
-
Javascript_submit()完了後に処理したい
JavaScript
-
-
4
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
5
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
6
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
7
html selectの内容を初期値に戻す
JavaScript
-
8
テーブルの任意の列を非表示にしたい
HTML・CSS
-
9
テーブルでスクロールを同期したい
HTML・CSS
-
10
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
11
php.ini を設定を変更すると再起動しなければいけないのでしょうか?
PHP
-
12
テーブルの最後(最新)のレコードを抽出したい
MySQL
-
13
onchangeイベントを強制的に発生させる
JavaScript
-
14
MAX関数を使ってからLEFT JOINしたいのですが・・
PHP
-
15
HTML5で、テーブル内tdタグの高さを常に固定に
HTML・CSS
-
16
python エラー
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
OpenCV での画素値の比較について
-
色の変更
-
リンク先を動的に変更する
-
libjpegライブラリの使い方につ...
-
画像が表示でnull; this.src
-
指定したフォルダの画像を一括...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
アコーディオンメニューの開閉制御
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
HTMLで条件分岐はできますか?
-
Ctrl+F(検索)の窓を出したいの...
-
javascriptで、クリックしたら...
-
c++std::string型をTCHARに変換...
-
URL末尾に特定の文字を含む場合...
-
【jQuery】複数の画像の読み込...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
(javascript)HTMLで指定した...
-
外部javascriptの重複を防ぐには
-
libjpegライブラリの使い方につ...
-
Vb.net2005での画像の合成方法
-
外部ファイルにしたら文字化け...
-
jQuery 複数のfind()
-
HTMLからimgのsrcのみを正規表...
-
html内にスライドショーを複数設置
-
条件分岐でキーが入力されてい...
-
複数画像のランダム複数表示(...
-
ダイアログから画像ファイルは...
-
【OpenCV】二値画像後、白の部...
-
"lightbox"の"CLOSE"ボタンクリ...
-
onclickで画面が固まる・・・ら...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
おすすめ情報