如何获取css设置的元素的字体大小
我正在编写一个简单的jQuery,用于将元素的字体大小更改一定百分比。 我遇到的问题是当我用jQuery的$(’#el’)。css(’font-size’)获得大小时,它总是返回一个像素值,即使用em设置也是如此。 当我使用Javscript的el.style.font-size属性时,它将不会返回一个值,直到一个值被同一属性显式设置。
有什么方法可以用Javascript获得原始CSS设置的字体大小值吗? 您的方法如何跨浏览器友好?
提前致谢!
编辑:我应该注意所有经过测试的浏览器(请参阅下面的评论)允许我使用上面提到的两种方法使用’em’值设置文本大小,此时jQuery .css()返回一个等效的’ px’的值和Javascript .style.fontSize方法返回正确的’em’值。 也许最好的方法是在页面加载时初始化元素,立即为它们提供em值。
这个jQuery插件看起来会起作用:
更新:jQuery插件,用于通过像素到转换保留可扩展接口
Github:jQuery-Pixel-Em-Converter
除IE之外的所有目标浏览器都会向您报告元素的“计算样式” 。 在您的情况下,您不想知道计算的px
大小对于font-size
是什么,而是您想要在样式表中设置的值。
只有IE才能通过其currentStyle
function实现这一目标。 不幸的是,jQuery在这种情况下对你起作用,甚至让IE报告px
的计算大小(它使用Dean Edwards的这个hack这样做,你可以自己查看源代码 )。
简而言之,你想要的是跨浏览器是不可能的。 只有IE可以做到(假设您绕过jQuery访问该属性)。 您设置内联值(而不是样式表)的解决方案是您可以做的最好的解决方案,因为浏览器不需要计算任何内容。
我有过这个问题一次。 我使用此函数来获取css属性的int值(如果有)。
function PBMtoInt(str) { return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0"); }
在Chrome中:
var rules = window.getMatchedCSSRules(document.getElementById('target'))
返回一个CSSRuleList
对象。 需要对此进行更多的实验,但看起来如果m < n
则则rules[n]
的CSSStyleRule
会覆盖rules[m]
的CSSStyleRule
。 所以:
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]; } }
在Firefox中,可以使用sheets = document.styleSheets
将所有样式表作为StyleSheetList
,然后在工作CSSStyleSheet sheet
中迭代每个CSSStyleSheet sheet
sheets
。 遍历工作表中的CSSStyleRule
(忽略CSSImportRule
)并通过document.getElementById('target').querySelector(rule.selectorText)
针对目标元素测试每个规则。 然后应用与上面相同的正则表达式.....但这只是一个猜测,我没有测试过它或任何东西....