Nhận kích thước phông chữ được tính toán cho phần tử DOM trong JS

Question

Có thể phát hiện được số font-size được tính toán của một phần tử DOM không, xem xét các cài đặt chung được thực hiện ở nơi khác (ví dụ: thẻ body), giá trị kế thừa, v.v.

Một cách tiếp cận độc lập với khuôn khổ sẽ tốt đẹp, vì tôi đang làm việc trên một tập lệnh nên hoạt động độc lập, nhưng đó không phải là yêu cầu của khóa học.

Bối cảnh: Tôi đang cố gắng để tinh chỉnh CKEditor's phông chữ chọn plugin (nguồn here) để nó luôn hiển thị kích thước phông chữ của vị trí con trỏ hiện hành (như trái ngược với chỉ khi trong vòng một span có một font-size bộ rõ ràng, mà là hành vi hiện tại).

Answer 1

Bạn có thể thử sử dụng phi tiêu chuẩn sở hữu IE element.currentStyle, nếu không bạn có thể tìm kiếm các DOM Level 2 chuẩn getComputedStyle phương pháp nếu có:

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)]; 
    } 
} 

Cách sử dụng:

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

Thông tin thêm:

• Get Styles (QuirksMode)

Edit: Nhờ @Crescent tươi, @kangax và @Pekka cho ý kiến.

Thay đổi:

• Added camelize chức năng, vì tính chất chứa hypens, như font-size, phải được truy cập như camelCase (Eg .: fontSize) trên đối tượng currentStyle IE.
• Kiểm tra sự tồn tại của document.defaultView trước khi truy cập getComputedStyle.
• Đã thêm trường hợp cuối cùng, khi el.currentStyle và getComputedStyle không khả dụng, hãy nhận thuộc tính CSS nội dòng qua element.style.

Answer 2

Để khắc phục sự cố 'em' tôi đã nhanh chóng viết một hàm, nếu cỡ phông chữ tức là 'em', hàm sẽ tính toán với kích thước phông chữ cơ thể.

 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; 
    } 

Answer 3

Hình như jQuery (1.9 ít nhất) sử dụng getComputedStyle() hoặc currentStyle bản thân khi bạn sử dụng $('#element')[.css][1]('fontSize'), vì vậy bạn thực sự không cần phải bận tâm với các giải pháp phức tạp hơn nếu bạn là OK sử dụng jQuery.

Đã thử nghiệm trong IE 7-10, FF và Chrome