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

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

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

小数点で高さを取るにはgetBoundingClientRectを使う
jQueryのバージョン２までの実行結果
jQueryのバージョン３以降の実行結果
まとめ

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

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

<table id="tbl1">
<tbody>
<tr style="height: 30.334px;">
<td>col1-1</td>
<td>col1-2</td>
</tr>
<tr style="height: 40.444px;">
<td>col2-1</td>
<td>col2-2</td>
</tr>
<tr style="height: 50.554px;">
<td>col3-1</td>
<td>col3-2</td>
</tr>
<tr style="height: 60.664px;">
<td>col4-1</td>
<td>col4-2</td>
</tr>
<tr style="height: 70.774px;">
<td>col5-1</td>
<td>col5-2</td>
</tr>
<tr style="height: 70.775px;">
<td>col6-1</td>
<td>col6-2</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<tbody>
<tr>
<td>col1-1</td>
<td>col1-2</td>
</tr>
<tr>
<td>col2-1</td>
<td>col2-2</td>
</tr>
<tr>
<td>col3-1</td>
<td>col3-2</td>
</tr>
<tr>
<td>col4-1</td>
<td>col4-2</td>
</tr>
<tr>
<td>col5-1</td>
<td>col5-2</td>
</tr>
<tr>
<td>col6-1</td>
<td>col6-2</td>
</tr>
</tbody>
</table>

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

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

Microsoft Edge

Microsoft Edgeの実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30.329998016357422]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30.33001708984375]
tbl1.eq(0).css( 'height' )=[30px]
tbl2.eq(0).css( 'height' )=[30px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40.439998626708984]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40.439971923828125]
tbl1.eq(1).css( 'height' )=[40px]
tbl2.eq(1).css( 'height' )=[40px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[50.54999542236328]
tbl2.eq(2).get(0).getBoundingClientRect().height=[50.550018310546875]
tbl1.eq(2).css( 'height' )=[51px]
tbl2.eq(2).css( 'height' )=[51px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl2.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl1.eq(3).css( 'height' )=[61px]
tbl2.eq(3).css( 'height' )=[61px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[70.77000427246094]
tbl2.eq(4).get(0).getBoundingClientRect().height=[70.76995849609375]
px_test.html (15,21)
tbl1.eq(4).css( 'height' )=[71px]
tbl2.eq(4).css( 'height' )=[71px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[70.76998901367187]
tbl2.eq(5).get(0).getBoundingClientRect().height=[70.77001953125]
tbl1.eq(5).css( 'height' )=[71px]
tbl2.eq(5).css( 'height' )=[71px]

Microsoft Internet Explorer 11

Microsoft Internet Explorer 11の実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30.329998016357422]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30.32000732421875]
tbl1.eq(0).css( 'height' )=[30px]
tbl2.eq(0).css( 'height' )=[30px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40.439998626708984]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40.42999267578125]
tbl1.eq(1).css( 'height' )=[40px]
tbl2.eq(1).css( 'height' )=[40px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[50.54999542236328]
tbl2.eq(2).get(0).getBoundingClientRect().height=[50.540008544921875]
tbl1.eq(2).css( 'height' )=[51px]
tbl2.eq(2).css( 'height' )=[51px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl2.eq(3).get(0).getBoundingClientRect().height=[60.65997314453125]
tbl1.eq(3).css( 'height' )=[61px]
tbl2.eq(3).css( 'height' )=[61px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[70.77000427246094]
tbl2.eq(4).get(0).getBoundingClientRect().height=[70.77001953125]
tbl1.eq(4).css( 'height' )=[71px]
tbl2.eq(4).css( 'height' )=[71px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[70.76998901367187]
tbl2.eq(5).get(0).getBoundingClientRect().height=[70.760009765625]
tbl1.eq(5).css( 'height' )=[71px]
tbl2.eq(5).css( 'height' )=[71px]

Google Chrome

Google Chromeでの実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30]
tbl1.eq(0).css( 'height' )=[30px]
tbl2.eq(0).css( 'height' )=[30px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40]
tbl1.eq(1).css( 'height' )=[40px]
tbl2.eq(1).css( 'height' )=[40px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[51]
tbl2.eq(2).get(0).getBoundingClientRect().height=[51]
tbl1.eq(2).css( 'height' )=[51px]
tbl2.eq(2).css( 'height' )=[51px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[61]
tbl2.eq(3).get(0).getBoundingClientRect().height=[61]
tbl1.eq(3).css( 'height' )=[61px]
tbl2.eq(3).css( 'height' )=[61px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[71]
tbl2.eq(4).get(0).getBoundingClientRect().height=[71]
tbl1.eq(4).css( 'height' )=[71px]
tbl2.eq(4).css( 'height' )=[71px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[71]
tbl2.eq(5).get(0).getBoundingClientRect().height=[71]
tbl1.eq(5).css( 'height' )=[71px]
tbl2.eq(5).css( 'height' )=[71px]

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

Microsoft Edge

Microsoft Edgeの実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30.329998016357422]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30.33001708984375]
tbl1.eq(0).css( 'height' )=[30.33px]
tbl2.eq(0).css( 'height' )=[30.33px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40.439998626708984]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40.439971923828125]
tbl1.eq(1).css( 'height' )=[40.44px]
tbl2.eq(1).css( 'height' )=[40.44px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[50.54999542236328]
tbl2.eq(2).get(0).getBoundingClientRect().height=[50.550018310546875]
tbl1.eq(2).css( 'height' )=[50.55px]
tbl2.eq(2).css( 'height' )=[50.55px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl2.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl1.eq(3).css( 'height' )=[60.66px]
tbl2.eq(3).css( 'height' )=[60.66px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[70.77000427246094]
tbl2.eq(4).get(0).getBoundingClientRect().height=[70.76995849609375]
tbl1.eq(4).css( 'height' )=[70.77px]
tbl2.eq(4).css( 'height' )=[70.77px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[70.76998901367187]
tbl2.eq(5).get(0).getBoundingClientRect().height=[70.77001953125]
tbl1.eq(5).css( 'height' )=[70.77px]
tbl2.eq(5).css( 'height' )=[70.77px]

Microsoft Internet Explorer 11

Microsoft Internet Explorer 11の実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30.329998016357422]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30.32000732421875]
tbl1.eq(0).css( 'height' )=[30.33px]
tbl2.eq(0).css( 'height' )=[30.32px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40.439998626708984]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40.42999267578125]
tbl1.eq(1).css( 'height' )=[40.44px]
tbl2.eq(1).css( 'height' )=[40.43px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[50.54999542236328]
tbl2.eq(2).get(0).getBoundingClientRect().height=[50.540008544921875]
tbl1.eq(2).css( 'height' )=[50.55px]
tbl2.eq(2).css( 'height' )=[50.54px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[60.660003662109375]
tbl2.eq(3).get(0).getBoundingClientRect().height=[60.65997314453125]
tbl1.eq(3).css( 'height' )=[60.66px]
tbl2.eq(3).css( 'height' )=[60.66px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[70.77000427246094]
tbl2.eq(4).get(0).getBoundingClientRect().height=[70.77001953125]
tbl1.eq(4).css( 'height' )=[70.77px]
tbl2.eq(4).css( 'height' )=[70.77px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[70.76998901367187]
tbl2.eq(5).get(0).getBoundingClientRect().height=[70.760009765625]
tbl1.eq(5).css( 'height' )=[70.77px]
tbl2.eq(5).css( 'height' )=[70.76px]

Google Chrome

Google Chromeでの実行結果。

////////////////////LINE[1]////////////////////////////////////
tbl1.eq(0).get(0).getBoundingClientRect().height=[30]
tbl2.eq(0).get(0).getBoundingClientRect().height=[30]
tbl1.eq(0).css( 'height' )=[30px]
tbl2.eq(0).css( 'height' )=[30px]
////////////////////LINE[2]////////////////////////////////////
tbl1.eq(1).get(0).getBoundingClientRect().height=[40]
tbl2.eq(1).get(0).getBoundingClientRect().height=[40]
tbl1.eq(1).css( 'height' )=[40px]
tbl2.eq(1).css( 'height' )=[40px]
////////////////////LINE[3]////////////////////////////////////
tbl1.eq(2).get(0).getBoundingClientRect().height=[51]
tbl2.eq(2).get(0).getBoundingClientRect().height=[51]
tbl1.eq(2).css( 'height' )=[51px]
tbl2.eq(2).css( 'height' )=[51px]
////////////////////LINE[4]////////////////////////////////////
tbl1.eq(3).get(0).getBoundingClientRect().height=[61]
tbl2.eq(3).get(0).getBoundingClientRect().height=[61]
tbl1.eq(3).css( 'height' )=[61px]
tbl2.eq(3).css( 'height' )=[61px]
////////////////////LINE[5]////////////////////////////////////
tbl1.eq(4).get(0).getBoundingClientRect().height=[71]
tbl2.eq(4).get(0).getBoundingClientRect().height=[71]
tbl1.eq(4).css( 'height' )=[71px]
tbl2.eq(4).css( 'height' )=[71px]
////////////////////LINE[6]////////////////////////////////////
tbl1.eq(5).get(0).getBoundingClientRect().height=[71]
tbl2.eq(5).get(0).getBoundingClientRect().height=[71]
tbl1.eq(5).css( 'height' )=[71px]
tbl2.eq(5).css( 'height' )=[71px]

まとめ

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の高さを小数点の単位まで取得する方法」でした。