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

スポンサーリンク

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-JavaScript
-,

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