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で質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- その他(プログラミング・Web制作) pythonのグローバル変数 2 2022/11/25 18:02
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- その他(プログラミング・Web制作) 物理の斜方投射で目盛りに数値を入れたい 2 2023/05/27 06:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクをつけた画像をクリック...
-
htmlでキャラクター画像を、サ...
-
ulの画像をcssのfloatで横並び...
-
map が機能しない
-
inputタグでサーバにデータを送...
-
リンク画像のマウスオーバー時...
-
Safariの場合HTMLの内容を変更
-
ホームページ製作において、テ...
-
画像の場合のみ、下線を消す方...
-
リンクを知らせる手のマークが...
-
cssヘッダー画像の下に配置した...
-
機種依存文字、m2(平方メート...
-
ホームページで画像を横に並べ...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
リストマーカーをボックス内に...
-
<div id="container">の使いか...
-
<table>の高さ固定。情報増加時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の場合のみ、下線を消す方...
-
cssで、チェックボックスの画像...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
画像の横に文字をうまく配置で...
-
table で画像をピッタリとくっ...
-
画像をリンクさせると紫の枠が...
-
レスポンシブ対応のHTML・CSS(...
-
3つの画像を中央に寄せて表示さ...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
cssヘッダー画像の下に配置した...
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
おすすめ情報