No.2ベストアンサー
- 回答日時:
No.1 です
> ところで、逆に現在のscaleの値も得ることが出来るでしょうか。
> 画像をクリックするたびに、25%->50%->100%->25%->...としたいのです。
スクリプト上で現在の style の設定値を読み取るのは、
なかなかに面倒な処理になりがちです。
参考
https://developer.mozilla.org/ja/docs/Web/API/wi …
なので style ではなく class を読み書きしては如何でしょうか。
以下 HTML5/CSS3 での実装例です。
<style>
img.quarter { transform:scale(0.25); }
img.half { transform:scale(0.5); }
img.regular { transform:scale(1); }
</style>
<script> document.addEventListener('click', function(ev){
var A = [ 'quarter', 'half', 'regular' ];
var x = ev.target;
if (! x instanceof HTMLImageElement) return;
var i = A.reduce(function(p,v,i){return x.classList.contains(v)? i: p},-1);
if (i < 0) return;
x.classList.remove(A[i]);
x.classList.add(A[ (i+1) % A.length ]);
}, false)</script>
<body>
<p><img src=dummy1.jpg class=regular> クリックにより拡大縮小、初期100%
<p><img src=dummy2.png class=half> クリックにより拡大縮小、初期50%
<p><img src=dummy3.gif> 対象外の画像
No.1
- 回答日時:
<img width> に指定する値ですが、
以前はパーセントによる割合でも大丈夫でしたが、
最近の HTML では「ピクセル数」のみと厳格化されました。
http://momdo.github.io/html5-diff/#changed-attri …
というわけで
var s = event.srcElement;
s.width = s.width / 2 | 0;
とか
s.style.transform = "scale(0.5,1)";
なぞ如何でしょうか
この回答へのお礼
お礼日時:2014/12/23 18:19
返答ありがとうございます
ご提示の内容、全く知りませんでした。
参考にいたします。
ところで、逆に現在のscaleの値も得ることが出来るでしょうか。
画像をクリックするたびに、25%->50%->100%->25%->...としたいのです。
現在の大きさを知る方法があれば可能です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像をクリックして元に戻すには
-
リンクを知らせる手のマークが...
-
table で画像をピッタリとくっ...
-
IE7だけに出る謎の空白(CSS)...
-
スタイルシートでフレーム枠を...
-
ポップアップウィンドウのサイ...
-
機種依存文字、m2(平方メート...
-
ボタンをセル内一杯に表示させ...
-
画像にリンクをはって枠をつけ...
-
CSSでボックスの位置を変えたと...
-
favicon.ico はもういらない?
-
3つの画像を中央に寄せて表示さ...
-
htmlの文字が縦書きになる
-
リストマーカーをボックス内に...
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
CSSで背景画像を一番下にもって...
-
form input テキストを上下中央...
-
HTML属性での「""」 「''」違い
-
ワードにコピペ、画像が表示さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
inputタグでサーバにデータを送...
-
UDP通信を使うチャットプログラ...
-
画像の場合のみ、下線を消す方...
-
画像のサイズが変わらない
-
機種依存文字、m2(平方メート...
-
XML画像データををHTMLで簡単に...
-
画像をクリックして元に戻すには
-
Dreamweaverで画像⇔画像のアン...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
下記が私のHPのタグなのですが
-
同一URLの連続アクセス方法
-
アップロードするとレイアウト...
-
HTMLタグのDL DT DDを使ってli...
-
ルートパスの動作確認
-
htmlで画像を2個ずつ並べていき...
-
画像リンクの周りに線が出ます
おすすめ情報