width(もしくはheight)メソッドはjQueryでよく使うメソッドの一つだと思います。しかしこれらのメソッドの返り値はjQueryのバージョンによって差異があるようで注意が必要です。
少しはまったのでメモとして残しておきます。
width(もしくはheight)メソッドで取得できる値は整数か小数か
現在、jQueryのwidth(もしくはheight)メソッドについて調べると、いくつかの記事は整数が取れるといっており、いくつかの記事は小数が取れると言っております。わたしはとても混乱してしまいました。
結論、これはどちらかが間違っているというわけではなく、jQueryのバージョンによって返り値が整数なのか小数なのかが変わってくるということでした。
jQueryのバージョンによるwidth(もしくはheight)メソッド返り値の相違
元々jQueryのwidth(もしくはheight)メソッドは整数を返すものでした(小数点四捨五入)。ある時点から小数を返すようになったのですが、それがjQuery3.0.0です。バージョン2の最終版jQuery2.2.4では整数が返ります。
<style>
body{ height:500.5px; }
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
console.log($('body').height()) //出力：501px
</script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
console.log($('body').height()) //出力：500.5px
</script>リファレンス
下記の公式サイトで、jQuery3.0の更新によってwidth(もしくはheight)メソッドが小数を返すようになったことが述べられています。
『3.0以前では整数返してたけど、3.0ではgetBoundingClientRectを使ってより正確な値返すから整数とは限らないよ』と言っています。
jQuery Core 3.0 Upgrade Guide | jQuery
jQuery: The Write Less, Do More, JavaScript Library
jquery.com
以上、width()とheight()の返り値についての注意点でした。
コメント