jQueryでfont-sizeを取得しようとすると、10px以下は取得できないときの対処法。

「jQuery　フォントサイズ　取得」で検索すると、だいたい以下のやり方がヒットします。

$(セレクタ).css("cssのプロパティ");

なので、html要素のフォントサイズを取得するなら

$("html").css("font-size");

てな、具合です。

これで、問題なくフォントサイズは取得できます。

では、自分が困ったのはどんな場合かということですね。今となっては珍しい文字サイズ変更ボタンを実装するときに困りました。

文字サイズ変更ボタンを実装する時って、変更したい箇所のフォントサイズは絶対サイズのpxではなく、相対サイズを使います。

今回は、remを使いました。そして、htmlにfont-size:62.5%を設定して、その値をボタンで変更することで、ページ全体の文字サイズを変更させるやり方です。

また、ボタンは「小さく」「標準」「大きく」にして、「小さく」をクリックするごとにサイズが小さくなる仕様にしました。

$(“html”).css(“font-size”);で、フォントサイズを取得して、減算して $(“html”).css(“font-size”,減算値);でフォントサイズを再設定するコードを書きました。

ただし、$(“html”).css(“font-size”);でフォントサイズを取得すると 「62.5%」 ではなく「10px」が返ってきます。10pxが変えてきたので、pxを取って、数値に変えて、引き算なり1以下を掛け算して減算して、そして、%の単位を付けて $(“html”).css(“font-size”,減算値); 再設定すれば、62.5％より小さい値（例えば9px換算の56.25% とか)が設定できます。

問題は2回目です。

htmlのstyleには56.25%が設定されているのですが、 $(“html”).css(“font-size”);でフォントサイズを取得すると 、9pxではなくて10pxが返ってきます。

なので、さらに小さいサイズに設定することができません。

というのは、 $(“html”).css(“font-size”);は、ブラウザが計算したフォントサイズが返ってきているようです。

なので、 html{font-size:56.25%;}となていても、戻り値は10pxなんです。何のため、html[font-size:9px;}としてみても、戻り値は10pxです。

ちなみに、使用しているブラウザはGoogle Chromeで、 Chrome が10px以下を描画しないからだと思います。設定で変更はできるとのこですけど、それは個人の端末の話なので、どうにもならないです。

解決策

で、解決策ですが、「.style.fontSize」を使います。コードはこんな感じ。

var aElement = document.getElementsByTagName("html");
var FontSize = aElement[0].style.fontSize;

最初は、下記のようにしてましたが、これではだめでした。

var aElement = document.getElementsByTagName("html");
var FontSize = aElement.style.fontSize;

getElementsByIdならば、戻りは1つなんだけど、getElementsByTagNameだと戻りは配列みたいです。

全体としてはこんな感じ。

他のページに移ってもフォントサイズを保持するように、jquery.cookieを使ってます。

jQuery(function ($) {

    //変数にクッキー名を入れる
    var history = $.cookie('fontSize');
   //クッキーが設定されてるなら、それをフォントサイズに設定。
    if (history) {
        $('html').css('font-size', history);
    }

    $('#fontsize span').click(function () {
        var aElement = document.getElementsByTagName("html");
        var FontSize = aElement[0].style.fontSize;
        var value = FontSize.slice(0, -1);
        var newValue;
        var setFontSize;
        var c = $(this).attr('id');
        switch (c) {
            case 'ss-small':
                newValue = value * 0.9 ;
                break;
            case 'ss-medium':
                newValue = 62.5;
                break;
            case 'ss-large':
                newValue = value * 1.1;
                break;
        }
	setFontSize = newValue + '%';
        $('html').css('font-size', setFontSize);

        $.cookie('fontSize', setFontSize, {
            expires: 1
        });
        console.log(setFontSize);
    });
});

HTML

<div id="fontsize">文字サイズ <span id="ss-small">小さく</span> <span id="ss-medium">標準</span> <span id="ss-large">大きく</span></div>