- ベストアンサー
Javascriptで画像の大きさを%指定したい
imgタグで、画像の大きさをwidth="50%"と元の大きさを基準に指定できます。 そしてJavaScript中で window.event.srcElement.width = 123 として、大きさを指定できますが、JavaScript中で window.event.srcElement.width = "50%" とすると失敗します。 JavaScript中にて、パーセントで指定できないのでしょうか。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1 です > ところで、逆に現在のscaleの値も得ることが出来るでしょうか。 > 画像をクリックするたびに、25%->50%->100%->25%->...としたいのです。 スクリプト上で現在の style の設定値を読み取るのは、 なかなかに面倒な処理になりがちです。 参考 https://developer.mozilla.org/ja/docs/Web/API/window.getComputedStyle なので 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> 対象外の画像
その他の回答 (1)
- Ogre7077
- ベストアンサー率65% (170/258)
<img width> に指定する値ですが、 以前はパーセントによる割合でも大丈夫でしたが、 最近の HTML では「ピクセル数」のみと厳格化されました。 http://momdo.github.io/html5-diff/#changed-attributes というわけで var s = event.srcElement; s.width = s.width / 2 | 0; とか s.style.transform = "scale(0.5,1)"; なぞ如何でしょうか
お礼
返答ありがとうございます ご提示の内容、全く知りませんでした。 参考にいたします。 ところで、逆に現在のscaleの値も得ることが出来るでしょうか。 画像をクリックするたびに、25%->50%->100%->25%->...としたいのです。 現在の大きさを知る方法があれば可能です。
お礼
返答ありがとうございます 内容が高度で私では理解できません。 残念ながら今回は諦めます。 今後もおねがいします