36

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

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

背景: CKEditor のフォント セレクター プラグイン (source here ) を微調整して、現在のカーソル位置のフォント サイズを常に表示するようにしています (現在の動作でspanある明示的なfont-sizeセットを持つ 内の場合とは対照的です)。

4

3 に答える 3

58

非標準の IE プロパティを使用することもできます。それ以外の場合は、利用可能な場合はDOM レベル 2標準メソッドelement.currentStyleを探すことができます。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のコメントに感謝します。

変更点:

  • camelizeのようなハイフンを含むプロパティは、 IE オブジェクトで camelCase (例: )font-sizeとしてアクセスする必要があるため、関数が追加されました。fontSizecurrentStyle
  • document.defaultViewにアクセスする前にの存在を確認しgetComputedStyleます。
  • 最後のケースを追加しました。el.currentStyleとgetComputedStyleが利用できない場合、 経由でインライン CSS プロパティを取得しますelement.style。
于 2009-12-23T20:33:20.193 に答える
4

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

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

于 2013-04-11T03:12:27.110 に答える
2

'em'の問題を克服するために、私はすぐに関数を作成しました。つまり、のfont-sizeが' em'の場合、関数はbodyのfont-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;
    }
于 2011-06-22T22:30:00.240 に答える