如何获取元素的“指定”样式而不是计算样式

Question

On a web page that does not contain a viewport meta tag, most mobile browsers will "boost" some or all of the fonts on the page to a size larger than what the css specifies. On mobile Safari, for instance, a specified size of 7px will be boosted to something like 12px .

You can read out the boosted value by using getComputedStyle . My question is, is there a reliable way to read out the unboosted value? Ie if the font is boosted to 12, I want to know that it started out at 7.

Answer 1

Webkit has a deprecated function to get all stylesheet rules for an element: window.getMatchedCSSRules(<<element>>) . You could use that to get the list of rules and loop through them to print or process the properties of each however you like. You would also need to consider the style attribute of the element.

To handle your font-size scenario, I imagine the best approach would be to get all the rules that apply to the element, order them by priority (remembering to factor in the style attribute and !important flags, and then pick out the value.

This isn't exactly reliable though, since it's a Webkit function and it's on its way out. There's a bunch of discussion here about how to fish out rules. Once you have the rules for an element, it's just a matter of picking out the specific information you need.

Answer 2

Just a quick answer here. In short: you can't get specified styles with today's API's. I was able to solve my specific problem by temporarily turning off font-boosting by using text-size-adjust (prefixed with -webkit- for Safari).