복붙노트

[JQUERY] JS에서 DOM 요소에 대해 계산 된 글꼴 크기를 가져옵니다

JQUERY

JS에서 DOM 요소에 대해 계산 된 글꼴 크기를 가져옵니다

해결법


  1. 1.비표준 IE IE IE Element.CurrentStyle 속성을 사용하려고 할 수 있습니다. 그렇지 않으면 사용할 수있는 경우 DOM 레벨 2 표준 GetComputedStyle 메서드를 찾을 수 있습니다.

    비표준 IE IE 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');
    

    더 많은 정보:

    편집 : @screscent fresh, @kangax 및 @pekka 덕분에 댓글을 입으 셨습니다.

    변경 사항 :


  2. 2.$ ( '# 요소')를 사용할 때 jQuery (1.9 이상)는 GetComputedStyle () 또는 CurrentStyle 자체를 사용합니다 [CSS] [1] ( 'Fontsize')을 사용하면 더 복잡하게 괴롭히지 않아야합니다. jQuery를 사용하여 ok 인 경우 솔루션.

    $ ( '# 요소')를 사용할 때 jQuery (1.9 이상)는 GetComputedStyle () 또는 CurrentStyle 자체를 사용합니다 [CSS] [1] ( 'Fontsize')을 사용하면 더 복잡하게 괴롭히지 않아야합니다. jQuery를 사용하여 ok 인 경우 솔루션.

    IE 7-10, FF 및 크롬에서 테스트되었습니다


  3. 3.'EM'문제를 극복하기 위해서는 IE의 글꼴 크기가 'EM'의 글꼴 크기가 본문 글꼴 크기로 계산하는 경우에 기능을 빠르게 작성했습니다.

    'EM'문제를 극복하기 위해서는 IE의 글꼴 크기가 'EM'의 글꼴 크기가 본문 글꼴 크기로 계산하는 경우에 기능을 빠르게 작성했습니다.

            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;
        }
    
  4. from https://stackoverflow.com/questions/1955048/get-computed-font-size-for-dom-element-in-js by cc-by-sa and MIT license