###前提・実現したいこと
画像サイズを実数を使って変更する
0.1などを加算して拡大したい
###発生している問題・エラーメッセージ
1などの整数では正常に拡大されるものの、0.1などの実数では拡大されない
###該当のソースコード
javascript
1e.width +=0.5; 2e.height +=0.5;
###試したこと
parseIntなどを用いたりしたが、拡大されなかった
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/01/09 08:03
退会済みユーザー
2017/01/09 08:28
回答3件
0
このように行うことで画像サイズを変化させることができると思いますが、いかがでしょう?
0.1ずつ大きくなっているので、わかりづらいかもしれませんが、そのときは2倍ずつなどにしてみると良いかもしれません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<img src="image.png" id="box"> 9<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 10<script> 11 $(document).ready(function () { 12 var imageWidth = $("#box").width(); 13 var imageHeight = $("#box").height(); 14 $("#box").on('click', function () { 15 imageWidth = imageWidth + 0.1; 16 imageHeight = imageHeight + 0.1; 17 $(this).width(imageWidth); 18 $(this).height(imageHeight); 19 }); 20 }); 21</script> 22</body> 23</html>
追記
javascriptならば以下のようにかけると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<img src="image.png" id="box"> 9<script> 10 window.onload = function () { 11 var imageWidth = document.getElementById("box").clientWidth; 12 var imageHeight = document.getElementById("box").clientHeight; 13 document.getElementById("box").addEventListener('click', function () { 14 imageWidth = imageWidth + 0.5; 15 imageHeight = imageHeight + 0.5; 16 document.getElementById("box").style.width = imageWidth + "px"; 17 document.getElementById("box").style.height = imageHeight + "px"; 18 }); 19 }; 20</script> 21</body> 22</html>
投稿2017/01/09 09:23
編集2017/01/09 09:40総合スコア14731
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
こういうこと?
JavaScript
1e.style.width = parseFloat( e.style.width ) + 0.5 + "px";
追記:
これでいけるはずー。
JavaScript
1e.style.width = parseFloat( window.getComputedStyle( e, null ).getPropertyValue( 'width' ) ) + 0.5 + "px"; 2```**動くサンプル:**[https://jsfiddle.net/dkjc48qc/3/](https://jsfiddle.net/dkjc48qc/3/) 3 4【Window.getComputedStyle() - Web APIs | MDN】 5[https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) 6
投稿2017/01/09 08:13
編集2017/01/09 09:06総合スコア69458
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/09 08:20 編集
2017/01/09 08:35
2017/01/09 08:40
0
丸め誤差
浮動小数点演算における「丸め誤差」の事でしょうか。
JavaScript
1// bad 2var width = 0.300000003; 3width += 0.5; 4console.log(width); // 0.8000000030000001 5 6// good 7var width = 0.300000003; 8width = (width * 1000000000 + 0.5 * 1000000000) / 1000000000; // 整数演算させた後に10の乗数で除算する 9console.log(width); // 0.800000003
Re: mimikku さん
投稿2017/01/09 08:36
総合スコア18166
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。