Làm cách nào tôi có thể nhận kích thước phông chữ của một phần tử như được đặt bởi css

Question

Tôi đang viết một jQuery đơn giản để thay đổi kích thước phông chữ của một phần tử theo một tỷ lệ nhất định. Vấn đề tôi gặp phải là khi tôi nhận được kích thước với $ ('# el') của jQuery. Css ('font-size') nó luôn trả về giá trị pixel, ngay cả khi được thiết lập với em. Khi tôi sử dụng thuộc tính el.style.font-size của Javscript, nó sẽ không trả về một giá trị cho đến khi một thuộc tính được đặt rõ ràng bởi cùng một thuộc tính.

Có cách nào để tôi có thể nhận giá trị kích thước phông chữ CSS được đặt ban đầu bằng Javascript không? Làm thế nào qua trình duyệt thân thiện là phương pháp của bạn?

Cảm ơn trước!

Chỉnh sửa: Tôi nên lưu ý rằng tất cả các trình duyệt được kiểm tra (Xem bình luận bên dưới) cho phép tôi đặt kích thước văn bản bằng cách sử dụng giá trị 'em' bằng hai phương pháp được đề cập ở trên, tại điểm jQuery .css() trả về giá trị 'px' tương đương và phương thức Javascript .style.fontSize trả về giá trị 'em' chính xác. Có lẽ cách tốt nhất để làm điều này sẽ là khởi tạo các phần tử trên tải trang, tạo cho chúng một giá trị em ngay lập tức.

Answer 1

jQuery plugin này có vẻ như nó sẽ làm các trick:

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

Github: jQuery-Pixel-Em-Converter

Answer 2

tôi có vấn đề này một lần. tôi sử dụng hàm này để lấy giá trị int của thuộc tính css, nếu có.

function PBMtoInt(str) 
{ 
return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0"); 
} 

Answer 3

Tất cả các trình duyệt đích của bạn ngoại trừ IE sẽ báo cáo cho bạn "Computed Style" của phần tử. Trong trường hợp của bạn, bạn không cần muốn để biết kích thước tính toán px là dành cho font-size, nhưng thay vào đó bạn muốn đặt giá trị trong (các) biểu định kiểu của mình.

Chỉ có IE mới có thể nhận được quyền này với tính năng currentStyle. Thật không may jQuery trong trường hợp này hoạt động chống lại bạn và thậm chí là IE để báo cáo kích thước tính toán trong px (nó sử dụng this hack bởi Dean Edwards để làm như vậy, bạn có thể tự kiểm tra the source).

Tóm lại, điều bạn muốn là trình duyệt chéo không thể. Chỉ có IE mới có thể làm điều đó (miễn là bạn bỏ qua jQuery để truy cập thuộc tính). Giải pháp thiết lập giá trị nội tuyến (trái ngược với trong biểu định kiểu) là điều tốt nhất bạn có thể làm, khi đó trình duyệt không cần phải tính toán bất cứ điều gì.

Answer 4

Trong Chrome:

var rules = window.getMatchedCSSRules(document.getElementById('target')) 

trả về một đối tượng CSSRuleList. Cần thử nghiệm nhiều hơn một chút với điều này, nhưng có vẻ như nếu m < n thì CSSStyleRule tại rules[n] ghi đè số này tại rules[m]. Vì vậy:

for(var i = rules.length - 1; i >= 0; --i) { 
    if(rules[i].style.fontSize) { 
     return /.*(em|ex|ch|rem|vh|vw|vmin|vmax|px|in|mm|cm|pt|pc|%)$/.exec(rules[i].style.fontSize)[1]; 
    } 
} 

Trong Firefox, có thể sử dụng sheets = document.styleSheets để có được tất cả các stylesheets của bạn như một StyleSheetList, sau đó lặp lại trên mỗi CSSStyleSheet sheet trong sheets. Lặp lại thông qua các CSSStyleRule s trong sheet (bỏ qua CSSImportRule s) và kiểm tra từng quy tắc đối với phần tử mục tiêu qua document.getElementById('target').querySelector(rule.selectorText). Sau đó áp dụng cùng một regexp như trên .....nhưng đó chỉ là một phỏng đoán, tôi chưa thử nghiệm nó hay bất cứ điều gì ....