MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK

jQueryで任意要素のフォントサイズを取得する方法

Pocket

jQuery.css()を使うと、特定要素に現在当たっているスタイルを取得することができます。
そこで、フォントサイズを探ろうとして、

var fontsize = $('#target').css('font-size');

としてやるとDOMの構造やブラウザによってばらつきが出てしまいます。
実際の大きさよりもはるかに大きい値が返ることもあります。

なんとかならないかと思案したところ、簡単で計算量も少ない方法を思いつきました。
font-size:1em, line-height:1 の要素をそこに挿入して、要素の高さを計測するという方法です。
コードは以下のようになります。

function getFontSize(target){
	var div = $('<div style="display:none;font-size:1em;margin:0;padding:0;height:auto;line-height:1;border:0;">&nbsp;</div>');
	var size = div.appendTo(target).height();
	div.remove();
	return size;
}

display:none;で挿入して、最後にremove()しているので見た目を汚しません。

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK