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
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました