Jak mogę uzyskać rozmiar czcionki elementu, jak to było ustawione przez css

Question

Piszę proste jQuery, aby zmienić rozmiar czcionki elementu o określony procent. Problem, który mam, polega na tym, że kiedy dostaję rozmiar za pomocą $ jQuery $ ('# el'). Css ("rozmiar czcionki") zawsze zwraca wartość piksela, nawet jeśli jest ustawiona z em. Kiedy używam właściwości el.style.font-size Javscript, nie zwróci ona wartości, dopóki nie zostanie jawnie ustawiona przez tę samą właściwość.

Czy jest jakiś sposób, w jaki mogę uzyskać oryginalny CSS ustawiony rozmiar czcionki z JavaScript? W jaki sposób Twoja metoda jest przyjazna dla różnych przeglądarek?

Z góry dziękuję!

Edit: Należy zauważyć, że wszystkie badane przeglądarek (patrz komentarz poniżej) pozwala mi ustawić tekst rozmiarze przy użyciu wartości „em” za pomocą dwóch metod, o których mowa powyżej, w którym to punkcie .css jQuery() zwraca równoważną wartość "px", a metoda JavaScript .style.fontSize zwraca poprawną wartość 'em'. Być może najlepszym sposobem na zrobienie tego będzie zainicjowanie elementów po wczytaniu strony, dając im wartość em od razu.

Answer 1

Wtyczka jQuery wygląda to rade:

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

Github: jQuery-Pixel-Em-Converter

Answer 2

miałem ten problem raz. Używam tej funkcji, aby uzyskać wartość int atrybutu css, jeśli taki istnieje.

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

Answer 3

Wszystkie przeglądarek docelowych, z wyjątkiem IE będzie raportować do ciebie "Computed Style" elementu. W twoim przypadku nie musisz chcieć wiedzieć, jaki jest wyliczony rozmiar px dla font-size, ale raczej chcesz ustawić wartość w twoim arkuszu stylów.

Tylko IE może to naprawić dzięki funkcji currentStyle. Niestety jQuery w tym przypadku działa przeciwko ty, a nawet dostaje IE, aby zgłosić obliczony rozmiar w px (używa on this hack przez Dean Edwards, aby to zrobić, możesz samemu sprawdzić the source).

Krótko mówiąc, to, co chcesz, jest niemożliwe w różnych przeglądarkach. Tylko IE może to zrobić (pod warunkiem, że pominiesz jQuery, aby uzyskać dostęp do właściwości). Twoje rozwiązanie polegające na ustawianiu wartości inline (w przeciwieństwie do arkusza stylów) jest najlepsze, co możesz zrobić, ponieważ wtedy przeglądarka nie musi niczego obliczać.

Answer 4

W Chrome:

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

zwraca CSSRuleList obiekt. Trzeba zrobić trochę więcej eksperymentów z tym, ale wygląda na to, że jeśli m < n, to CSSStyleRule pod rules[n] zastąpi ten pod numerem rules[m]. Więc:

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

W Firefoksie, może użyć sheets = document.styleSheets aby uzyskać wszystkie arkusze stylów jak StyleSheetList, następnie iteracyjne nad każdym CSSStyleSheet sheet w sheets. Iteracja przez CSSStyleRule s w sheet (ignorując s) i testowanie każdej reguły względem elementu docelowego poprzez document.getElementById('target').querySelector(rule.selectorText). Następnie zastosuj to samo wyrażenie regularne jak powyżej .....ale to tylko zgadywanie, nie przetestowałem go ani nic ...