d3: selection.style('font-size') 是否总是以 px 为单位返回一个值？答案

【问题标题】：d3: will selection.style('font-size') always return a value in px?d3: selection.style('font-size') 是否总是以 px 为单位返回一个值？
【发布时间】：2017-04-29 23:56:12
【问题描述】：

文档只是说selection.style 返回“当前计算值”。

我尝试使用 rems 在 css 中指定元素的字体大小，而 style('font-size') 似乎返回了以 px 为单位的相应大小（例如 '10.2px'）。

这是一种我可以跨浏览器依赖的行为，无论在 css 中指定字体大小的单位是什么？

【问题讨论】：

标签： javascript css d3.js

【解决方案1】：

为了回答你的问题，让我们看一下selection.style源代码：

export default function(name, value, priority) {
    var node;
    return arguments.length > 1
      ? this.each((value == null
            ? styleRemove : typeof value === "function"
            ? styleFunction
            : styleConstant)(name, value, priority == null ? "" : priority))
      : defaultView(node = this.node())
          .getComputedStyle(node, null)
          .getPropertyValue(name);
}

如您所见，它确实使用了getComputedStyle。

阅读关于getComputedStyle的MDN文档，我们可以读到：

getComputedStyle 返回的值称为解析值。这些通常与 CSS 2.1 计算值相同，但对于一些较旧的属性，如宽度、高度或填充，它们是使用的值。

然后，跳转到有关 computed values 的文档，我们可以阅读：

达到属性计算值所需的计算通常涉及将相对值（例如以 em 单位或百分比表示的值）转换为绝对值。（强调我的）

因此，由于 Chrome、Edge、Firefox、Internet Explorer、Opera 和 Safari 支持（基本）getComputedStyle，我们可以说您的问题的答案（“这是我可以依赖的行为吗？跨浏览器？”）似乎是是。

【讨论】：

从技术上讲，other absolute length units 不仅仅是 px，例如 mm 和 pt。尽管他们似乎不太可能真正参与其中。
@Gerardo 您可能想重新审视您的答案，因为 4.9+ 版本的行为有所不同，"d3.js v4.9 Get the calculated width of selected element" 已引起我们的注意。另一方面，即使问题引用了过时的文档。我认为至少注意一点对这两个帖子都有帮助。
是的，我看到了，还有新的d3.style()。