window.getComputedStyle 总是返回以像素为单位的测量值答案

【问题标题】：window.getComputedStyle always returns measurement in pixelswindow.getComputedStyle 总是返回以像素为单位的测量值
【发布时间】：2018-06-09 12:13:46
【问题描述】：

我只是想知道为什么windows.getComputedStyle(element).top 总是以像素为单位返回测量值，即使在top 位置明确设置为% 的情况下，就像element.style.top = 25 + '%' 一样。

我无法在网上找到任何信息。 有人知道为什么会这样吗？！

【问题讨论】：

因为必须将相对输入值计算为像素以供显示器显示。如果你想要%你需要根据父容器的尺寸来计算
@charlietfl 这很有意义。谢谢！
与各种颜色格式类似...它们会被转换，即使您输入十六进制或其他格式值，您也会返回 rgb
@charlietfl 是的，我在很久以前就注意到了。那个总是给我带来问题哈哈

标签： javascript object methods window

【解决方案1】：

您要查找的是 element.style.top。

这是window.getComputedStyle 的预期行为。

“window.getComputedStyle() 方法在应用活动样式表并解决这些值可能包含的任何基本计算之后，返回一个包含元素所有 CSS 属性值的对象。”

意味着除了像素之外的所有单位都将被计算或处理，然后以像素的形式呈现。甚至 GetComputedStyle 这个名字也暗示了这一点。

如果您愿意，可以阅读更多关于此here 的信息。

【讨论】：

不完全正确：如果您以百分比形式提供border-radius，那么window.getComputedStyle() 也会以百分比形式返回它，而不是以像素为单位。