画像サイズを実数を使って変更する

###前提・実現したいこと
画像サイズを実数を使って変更する
0.1などを加算して拡大したい
###発生している問題・エラーメッセージ

１などの整数では正常に拡大されるものの、0.1などの実数では拡大されない

###該当のソースコード

javascript
1e.width +=0.5; 
2e.height +=0.5;

###試したこと
parseIntなどを用いたりしたが、拡大されなかった

退会済みユーザー

2017/01/09 08:02

何を聞いているのか分かりません。ここに書いてある情報が全ての第三者にどう言う情報を提供すれば質問者さんの状況、困っていること、何がしたいのかが理解されるのか考えてください。

退会済みユーザー

2017/01/09 08:03

0,1　は 0や1という意味だと　前述の１などで正常に反するし、 0.1 のタイポだとしたらこれは整数ではないです。

退会済みユーザー

2017/01/09 08:28

もう一度いう 0.1 は整数ではないですよ

行動規範の内容に同意します

回答3件

このように行うことで画像サイズを変化させることができると思いますが、いかがでしょう？
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

s8_chu

総合スコア14731

ベストアンサー

こういうこと？

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

kei344

総合スコア69398

kei344

2017/01/09 08:20 編集

すいません、これではうごかないかも。

mimikku

2017/01/09 08:35

この方法ではうまく動きませんでした。よろしければ、ほかの方法がありましたら教えていただければ幸いです

kei344

2017/01/09 08:40

動くけど、最初に「e.style.width = "100px";」のように初期値を入れないと e.style.width を取得できないという感じです。動く例： https://jsfiddle.net/dkjc48qc/1/ 動かない例： https://jsfiddle.net/dkjc48qc/2/

行動規範の内容に同意します

丸め誤差

浮動小数点演算における「丸め誤差」の事でしょうか。

JavaScriptでの小数点の計算の誤差について - Qiita

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