Question

当我检查网页并想要调整字体大小值为百分比或em的元素时，我总是必须通过他们的祖先来找出这些百分比值所基于的人。由于这种情况在我的生活中发生了很多，我正在尝试编写一些代码以使事情变得更容易。但问题是，jQuery的.css（）方法只获取计算值，如下所示。

如何在CSS文件或style标记中获取元素的确切CSS值？
有没有像.offsetParent（）这样的函数可以实现我原来的目标？ 编辑：为了澄清，我想找到最近的祖先，其字体大小属性在px中设置。就像.offsetParent（）一样，它可以找到最近的祖先＆＃39;定位＆＃39;。
一个偏离话题的问题：在下面的小提琴中，为什么计算值19.2000007629395而不是19.2等于16 * 120％？

jsfiddle：http://jsfiddle.net/yae8qn70/

HTML：

<div class='a'>
    <div class='b'>120% font</div>
</div>
Result:<span class='r'></span>

的CSS：

.a{font-size:16px}
.b{font-size:120%}

JS：

$（＆＃39; .R＆＃39）。文本（$（＆＃39; .B＆＃39;。）的CSS（＆＃39;字体大小＆＃39;））

Answer 1

没有简单的方法，我很害怕，但如果你有决心，你可以做类似以下的事情：

获取样式表，例如var styleSheetList = document.styleSheets;
遍历每一个。
对于每个样式表，请阅读规则.cssRules
解析数组中的每个规则，寻找所需的选择器。

显然，您必须在代码中实现CSS级联。看起来像是一项非常多的工作，但它至少在理论上是可能的

Answer 2

尝试

$('.r').text(function (_, text) {

    var parent = window.getComputedStyle($('.b').parent()[0], null)
                 .getPropertyValue("font-size");

    var elem = window.getComputedStyle($('.b')[0], null)
               .getPropertyValue("font-size");

    var res = (Math.ceil((parseInt(elem) / parseInt(parent)) * 100));

    return res + "%"

});

jsfiddle http://jsfiddle.net/yae8qn70/1/

如何在CSS文件而不是计算文件中获取CSS属性值？

2 个答案: