如何获取元素的 "specified" 样式而不是计算样式

How to get an element's "specified" style instead of computed style

在不包含 viewport 元标记的网页上,大多数移动浏览器 "boost" 会将页面上的部分或全部字体设置为大于 [=22] =] 指定。例如,在移动版 Safari 上,7px 的指定大小将提升为 12px.

之类的大小

您可以使用getComputedStyle读出提升值。我的问题是,是否有可靠的方法来读出 unboosted 值? IE。如果字体增加到 12,我想知道它是从 7 开始的。

Webkit 有一个已弃用的函数来获取元素的所有样式表规则:window.getMatchedCSSRules(<<element>>)。您可以使用它来获取规则列表并循环遍历它们以根据需要打印或处理每个规则的属性。您还需要考虑元素的 style 属性。

为了处理您的 font-size 场景,我认为最好的方法是获取适用于该元素的所有规则,按优先级对它们进行排序(记住要考虑 style 属性和!important flags,然后挑出值。

尽管如此,这并不完全可靠,因为它是一个 Webkit 函数并且即将过时。有 a bunch of discussion here 关于如何钓鱼规则。有了元素的规则后,只需挑选出您需要的特定信息即可。

这里只是一个快速的回答。简而言之:您无法使用今天的 API 获得指定的样式。我 能够通过使用 text-size-adjust(Safari 的前缀为 -webkit-)暂时关闭字体增强来解决我的特定问题。