问题标签 [computed-style]

当我调用window.getComputedStyle()一个元素并尝试获取诸如 lineHeight 之类的属性时，它可以同时具有文字值和数值，是否有一种方法或不同的函数每次都会返回一个数值？

我的line-height示例是指normal关键字。其他示例包括字体粗细和边框宽度。所有这些都使用关键字，但映射到数值。

我想知道这是一个错误还是有一个好的解决方法：

仅在 Safari 上（使用 iOS Safari 8.1 和 Safari 7.0.5 作为开发工具），浏览器似乎没有计算出具有以下样式的元素的值：

.node { top: calc(39px - 100%); }

它在浏览器中正确显示，但window.getComputedStyle($('.node')).top返回null，实际上 Safari 开发工具中的计算属性也显示top: null. 如果我将样式更改为像素值，则计算属性会正确显示（即top: 400px）。

这对我来说是个问题，因为我想在 JavaScript 计算中使用计算出的样式值。

我正在开发一个 chrome 扩展，它返回任何元素的 font-size 属性。我正在将 ajax 响应数据加载到扩展文档中并计算它们的属性。现在发生了一些奇怪的事情，我无法找出原因。

我正在分析的网页上有一个标题标签。网页上的样式选项卡（检查元素）显示其字体大小为 2em，计算值为 32 像素。

现在，当我在我的 chrome 扩展程序中加载相同的页面时，我的扩展程序上的样式选项卡（检查元素）说它的字体大小是 2em，但显示它的计算样式是 24px。为了澄清，我附上了网页和 chrome 扩展的样式和计算样式的图像。

案例一：风格（网页）

计算样式（网页）

案例 2：样式（在 Chrome 扩展中加载后）

计算样式（在 Chrome 扩展中加载后）

我只想知道为什么会这样？相同的样式（2em），但浏览器窗口显示计算大小为 32 和扩展窗口（在同一浏览器上）显示 24px。

我可以在 JavaScript 中监听一个事件，告诉我特定 DOM 元素的计算样式发生了变化吗？

如果不是，那么使用 JavaScript 获取 DOM 元素的计算样式的阻塞最少的方法是什么？

在我的其他问题之一中，解决渲染问题的解决方案是使用该值rgba(255, 255, 255, 255)而不是transparent.我们测试使用rgba(0, 0, 0, 0)，这仍然纠正了问题，这意味着它是transparent导致错误的定义。但是，查看W3C CSS3 规范（和MDN 参考）可以transparent发现rgba(0, 0, 0, 0)并且 transparent应该是相等的：

透明的

完全透明。这个关键字可以被认为是透明黑色的简写，rgba(0,0,0,0)，它是它的计算值。

那么给了什么？为什么两个看似相同的值会产生不同的结果？我研究了 RGBA的格式，并寻找了类似的问题（无济于事）。每个提到从transparentto转换的问题/答案rgba(0,0,0,0)总是包含“应该”或“根据”字样。（例如这里）。实际差异是什么，为什么它会如此改变输出？

注意：这发生在大多数（如果不是全部）Internet Explorer 版本中。我们也知道它发生在某些版本的 Firefox 中。然而 Chrome 和 Safari 并没有显示这种行为，这让我们相信-webkit.

为了能够将此作为错误提交，我们需要使用最少的代码重现问题。所以，从我的另一个问题转移过来，这里是使用transparentvs的比较rgba(0,0,0,0)，以及当我们同时使用两者时会发生什么。

透明的

RGBA(0,0,0,0)

两个都

正如@andyb 所指出的，在单独的元素上同时使用两者时会出现奇怪的行为。你会认为只有一个会摇晃，但他们都会摇晃。如图所示：

对于那些无法在 Internet Explorer 中测试的人，这里是问题的动画 .gif：

这是transparent左侧，rgba中间和右侧。

正如@Abhitalks 所指出的，我误读了参考资料，但是我将在问题中留下以下内容，以表明我们已经考虑过这种可能性，或者以防某些事情被遗漏/忽视。

感谢@juan-cv 的回答，我决定尝试创建一个测试来查找transparent每个浏览器中的计算值，并得出以下结论：

这解释了为什么浏览器显示不同的结果。但是，它没有在任何地方解释他们的版本transparent实际定义为什么。我查看了旧的 CSS1 和 CSS2 w3c 规范，但找不到旧的定义。是什么transparent意思？

我正在尝试获取被覆盖的元素的 CSS 属性列表，例如：

当我们使用这段代码时：

我得到：

如果我使用 get computed 或 jquery.css 我会得到相同的结果，但实际上我想获得：

因为我没有指定/覆盖。

此示例中预期的值：顶部：10px 底部：自动或 null 或无

https://codepen.io/anon/pen/dvvdVv

同样，我只想要被覆盖的属性。

===================== 编辑======================

我的目标只是top,bottom从以下元素中获取价值：

和元素的 css，请注意我只指定了top：

现在我想获得最高价值和最低价值。如果我做：

结果是：10px 但是当我这样做时：

我700px应该得到empty, nothing,null或 ''

根据MDN：

如果from/0%或to/100%未指定，浏览器将使用所有属性的计算值开始或结束动画。

在以下示例中，height属性计算值为0px：

但是浏览器使用height: auto;，这是元素指定的值，这就是动画不起作用的原因。

这是规范上的类似内容：

如果未指定关键帧0%或from关键帧，则用户代理0%使用正在动画的属性的计算值构造关键帧。如果未指定关键帧100%或to关键帧，则用户代理100%使用正在动画的属性的计算值构造关键帧。

但是如果浏览器实际添加from {height: 0px;}了计算值，那么动画就会正常工作。在上述文档中使用指定值而不是计算值不是更准确吗？

我有一个这样的css类：

这个类被添加到一个 div 上，当用户单击一个按钮时，它会将其滑出到视图中。margin-left说它是在 IE11/Edge 开发者工具中计算出来的，它没有被覆盖或任何东西，但实际上并没有出现在浏览器中。

这是特定于 IE 和 Edge 的，在 Chrome 和 Firefox 中它按预期工作。

真正奇怪的是，当我在 IE/Edge 开发人员工具中关闭和再次打开 margin-left 时，它突然修复/应用自身并按预期显示。

这些短片有助于查看边距在 Chrome 中可见，但在 IE 中不可见。边距最明显的是双线之间的间隙，即打开抽屉的左边框。在 Chrome 中，我们看到了这一点，但在 IE 中，直到我们关闭并打开 devtools 中的属性，如视频所示：

• 铬：https ://youtu.be/LQz3OkVl6WI
• IE11：https ://youtu.be/A4gV4ZwUt0w

我有一种感觉，这可能与渲染引擎进行布局的时间有关，也许变换/翻译正在影响它，但真的不知道。不确定如何进一步缩小范围，Trident 或 EdgeHTML 的源代码是专有的。

有什么想法吗？

是否可以像以前在 Firebug 中显示的那样对 Firefox Developer 中“计算”选项卡中显示的样式进行分组？在那里，样式被分组为文本样式、背景样式等，可以折叠，这比 Firefox 开发人员显示的字母顺序排列更清晰，更容易访问。要查找特定样式，您必须过滤（因此知道名称）或通过所有选项卡。

我正在尝试在 vanilla JS 中构建一个响应式自定义元素，它可以响应对其计算尺寸的更改。我已经成功地观察到明确定义的属性/属性的变化。但是，我想知道是否可以观察自定义元素的计算属性的变化。例如：

当您将鼠标悬停在#container 元素上并更改自定义元素的计算高度/宽度时，是否可以触发 attributeChangedCallback()？