JavaScript

jQueryでTableの高さを小数点の単位まで取得する方法

投稿日:

jQueryのバージョン2まではTableの高さなどの値を普通の方法では整数値になり取得できません。
(jQueryのバージョン3以降では対応できているようです。)

そこで今回はjQueryのバージョン2までで、Tableの行の高さなどを小数単位で取得する方法を解説します。

小数点で高さを取るにはgetBoundingClientRectを使う

実際に小数単位で行の高さなどを取得するには「getBoundingClientRect」を利用します。

jQueryのバージョン2までの実行結果

jQueryのバージョン2までの実行結果ですが、Microsoft EdgeとInternet Explorer 11、Google Chromeでは実行結果が微妙にことなるので、それぞれの実行結果を載せておきます。

Microsoft Edge

Microsoft Edgeの実行結果。

Microsoft Internet Explorer 11

Microsoft Internet Explorer 11の実行結果。

Google Chrome

Google Chromeでの実行結果。

jQueryのバージョン3以降の実行結果

Microsoft Edge

Microsoft Edgeの実行結果。

Microsoft Internet Explorer 11

Microsoft Internet Explorer 11の実行結果。

Google Chrome

Google Chromeでの実行結果。

まとめ

Microsoft系のブラウザーではjQuery 2.2.4でもjQuery 3.3.1でもgetBoundingClientRectで小数点の値を取得できますが、若干の誤差が発生しています。
Google Chromeに関してはjQuery 2.2.4でもjQuery 3.3.1でもgetBoundingClientRectでは小数点の値を取得できないようです。

なおjQueryは「jQuery 2.2.4」と「jQuery 3.3.1」を利用して検証しています。

以上、「jQueryでTableの高さを小数点の単位まで取得する方法」でした。

スポンサーリンク

-JavaScript
-,

Copyright© ソフトウェア開発日記 , 2019 All Rights Reserved.