问题标签 [getcomputedstyle]

我想监听元素样式的变化（特别是在:hoverand/or的情况下insertRule）。我可以使用计算实际样式getComputedStyle并将其克隆到另一个对象中，然后对每个mouseenter/ mouseleave（或MutationObserver）进行 diff，但这对我来说似乎是相当低性能的解决方案。有没有更好的方法来跟踪元素样式的变化？

谢谢。

getComputedStyle 应该返回最终计算的 CSS 属性值。但是对于背景颜色，所有浏览器都返回透明（或 rgba(x,x,x,0)），而不是计算从祖先那里继承的值。

该方法唯一有效的情况是元素是否直接指定了背景颜色（即使通过其类，但不是通过父级的定义）。但这使得 getComputedStyle 无用，它应该考虑所有祖先的定义。

该方法适用于其他事物，如小提琴中所示的颜色。

如何在 JS 中获得元素的有效背景颜色，而不是每个元素都告诉我它是透明的？

如果有帮助，X 问题是如何计算用户脚本中页面中每个元素的字体颜色和背景之间的颜色亮度差异；） getComputedStyle 不起作用，恕我直言。但是这个问题本身应该很有趣。

好的，我完全期望因为提出一些愚蠢的问题（或至少是重复的）而陷入困境，但是在附加的代码片段中，为什么我必须使用window.getComputedStyle来访问 CSS 应用的样式？我的印象是，该.style字段至少会反映 CSS 最初应用的那些样式，和/或从那时起手动更改的那些样式。

.style如果不是，那么在元素的字段中反映（以及何时）反映哪些属性的确切规则是什么？

我正在制作一个动态响应广告，该广告具有各种媒体规则来说明不同的可能广告尺寸。根据页面的大小，将显示不同的内容。

如果显示特定元素的媒体规则处于活动状态，我已经设置了一些 JS 条件，这些条件将在没有价格时应用不同的样式。

这工作正常，除非页面在加载后调整大小。当页面宽度被修改到足以激活不同的媒体规则时，旧媒体规则中的 JS 样式仍然存在，这是我不想要的。

这是一个非常简化/通用的示例：

当页面宽度超过 600px 时，如果不显示价格，则背景颜色由灰色变为蓝色，字体大小会增加。

我只是想弄清楚如果媒体规则发生变化并且原始条件不再正确，如何重置计算的样式。

非常感谢任何见解。

我正在使用 selenium webdriver 测试网站，但我很难获得另一个属性的子属性的价值。对我来说，这个第二个/子级总是返回为空。

当尝试获取上层属性/属性的值时，它可以使用以下代码正常工作：

上面的那些返回我期望的文本/字符串。但是，如果我尝试获取子属性的值，如下所示：

我越来越空了。当我查看上面元素的 DOM/属性时，我确实看到了它们的值。

如果我右键单击开发人员工具栏中的属性并选择“复制属性路径”，我会得到以下信息：

所以我认为问题在于我如何通过假设我从开发人员工具栏复制的内容是正确的来引用子属性。我已经尝试过除句点之外的其他分隔符，但我现在仍然很幸运。

我正在尝试找出返回存储在-中的值的语法

我试过了：

这些都以 null 或 empty.string 的形式返回

我有包含文本的 HTML 文本和 SVG 文档，作为外部对象包含在内。我想保持 HTML 文本的大小和 SVG 文档中的文本相同。

修改 SVG 文档中的文本大小可以正常工作（我使用的是 d3.js），但作为第一步，我需要用户看到的文本大小。如果我调整浏览器窗口的大小或更改 SVG 对象的“宽度”，HTML 文本大小保持不变，而 SVG 内的文本大小会按比例变化。

为了测量用户看到的文本大小，我尝试了“getComputedStyle”和“getBoundingClientRect”。getBoundingClientRect 工作正常，但 getComputedStyle 总是告诉我在 SVG 文档中定义的文本大小，与任何缩放无关。

原则上我对“getBoundingClientRect”很好。唯一的缺点是，这总是需要 SVG 内部的水平文本元素，这在我的所有 SVG 文档中并非如此。当然我可能会介绍一个透明的水平示例文本。

我有感觉，这不是很聪明。也许有更好的解决方案。

我有一个父母在专注时为孩子们设置了一种风格。当我编译我的反应项目时，它完美地工作。

我正在使用reactemotion，但这没关系，因为最后我有通常的css。

我想从子元素中获取边框样式。

我正在使用 jest 来测试这个，我尝试了这样的事情。

所以期望失败了，它没有得到边框样式。

我需要获取元素的计算autoCSS 位置，但是当使用而不是数字值时，我会在浏览器中得到不一致的结果。

比如下面demo中设置bottom: auto; Chrome和Firefox的时候报告auto，但是Edge报告0px

有没有其他方法可以获得auto跨浏览器一致的实际计算值？

在边缘检查器中，您可以看到（下面的屏幕截图）实际设置值，auto但它显示计算值为0px

截图

铬 74.0.3729.131

边缘 44.17763.1.0 | EdgeHTML 18.17763

我试图在单击时使一个小方块消失，但前提是它是错误的选择。

问题是我希望它慢慢消失，我在选择正方形时遇到了一些问题。

我只是不知道如何card[i]在getComputedStyle. 这有点乱，因为我几乎尝试了所有东西，所以如果有人能向我解释如何正确选择getComputedStyle.

我是初学者，请解释一下，否则我什么都不懂。

返回的值是getComputedStyle已解析的值。这些通常与 CSS 2.1 的计算值相同，但对于一些较旧的属性，如width、height或padding，它们与使用的值相同。

-- MDN：window.getComputedStyle() 注释

那么目前是否可以获得样式表中指定的解析值？height

即知道某些元素的计算..px（= used）高度是height: 100%;在样式表中指定的吗？（100%是有问题的解决值。）

是否有一些关于这个问题的新规范正在考虑？

编辑 2020-08-17：从 2012 年看到非常相似的问题和出色的答案：是否有一种跨浏览器方法来获取所有元素的所有属性的已使用 css 值？ （可悲的是，从那时起，注意似乎发生了变化。）