web-dev-qa-db-ja.com

JSのDOM要素の計算されたフォントサイズを取得します

他の場所（たとえばbodyタグ）で行われた一般的な設定、継承された値などを考慮して、DOM要素の計算されたfont-sizeを検出することは可能ですか？

スタンドアロンで動作するはずのスクリプトに取り組んでいるので、フレームワークに依存しないアプローチがいいでしょうが、それはもちろん要件ではありません。

背景： CKEditor's フォントセレクタープラグイン（ソース ここ ）を微調整して、現在のカーソル位置のフォントサイズを常に表示するようにしています（明示的なfont-sizeセットを持つspan。これは現在の動作です）。

javascriptjquerycssckeditorfont-size
32
Pekka 웃

非標準のIE element.currentStyle プロパティを使用してみてください。そうでない場合は、 DOMレベル2 標準を探すことができます。 getComputedStyle 可能な場合はメソッド：

function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}

使用法：

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

より詳しい情報：

編集：ありがとう@ Crescent Fresh、@ kangaxおよび@ Pekkaコメント。

変更点：

  • font-sizeのようなハイペンを含むプロパティは、camelize IEオブジェクトのキャメルケース（例：fontSize）としてアクセスする必要があるため、currentStyle関数を追加しました。
  • getComputedStyleにアクセスする前に、document.defaultViewの存在を確認してください。
  • 最後のケースを追加しました。el.currentStyleとgetComputedStyleが使用できない場合、element.styleを介してインラインCSSプロパティを取得します。
53
CMS

getComputedStyle()を使用する場合、jQuery（少なくとも1.9）は$('#element')[.css][1]('fontSize')またはcurrentStyle自体を使用するように見えるので、より複雑なソリューションを気にする必要はありません。 jQueryを使用しても問題ありません。

IE 7-10、FFおよびChromeでテスト済み

3
Tom Auger

'em'の問題を克服するために、私はすぐに関数を作成しました。ieのfont-sizeが 'em'の場合、関数はbodyfont-sizeで計算します。

        function getFontSize(element){
        var size = computedStyle(element, 'font-size');
        if(size.indexOf('em') > -1){
            var defFont = computedStyle(document.body, 'font-size');
            if(defFont.indexOf('pt') > -1){
                defFont = Math.round(parseInt(defFont)*96/72);
            }else{
                defFont = parseInt(defFont);
            }
            size = Math.round(defFont * parseFloat(size));
        } 
        else if(size.indexOf('pt') > -1){
            size = Math.round(parseInt(size)*96/72)
        }
        return parseInt(size);
    }

    function computedStyle(element, property){
        var s = false;
        if(element.currentStyle){
            var p = property.split('-');
            var str = new String('');
            for(i in p){
                str += (i > 0)?(p[i].substr(0, 1).toUpperCase() + p[i].substr(1)):p[i];
            }
            s = element.currentStyle[str];
        }else if(window.getComputedStyle){
            s = window.getComputedStyle(element, null).getPropertyValue(property);
        }
        return s;
    }
2
Frans Dutch