问题标签 [getcomputedstyle]

在这个例子中 ::before 伪元素的内容不是一个静态值，而是一个计数器。我想获得当前值“2”而不是通用公式“counter(itemcounter)”。

正如我们所知，使用 window.getComputedStyle() 方法我们可以获得特定元素的计算样式。（见https://jsfiddle.net/r7sgpyt5/1/）。我的问题是，我们怎么知道计算样式中的 CSSStyleDeclaration 来自哪里。例如在https://jsfiddle.net/r7sgpyt5/1/我定义了一个 CSS 规则，例如：

如果我使用 getComputedStyle(element,null).getPropertyValue("color") 它返回“rgb(255, 0, 0)”，但我怎么知道属性“color”是在 css 选择器“#element”中定义的。

谢谢！

我用这个：

我得到值“10”。

javascript中有更好的更短的方法吗？

（以数字形式获取值）

我有一个简单的 div，它使用一个 css 类，该类又具有一个color和background-color属性集。

为什么我无法访问 CSSStyleDeclaration 的属性？我从我的第一个日志就知道它就在那里。我可以看到color: "rgb(82, 194, 145)"

我有这个简单的代码：

它返回此错误消息：

未捕获的类型错误：无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型。

我不知道我在这里做错了什么。任何人都可以帮忙吗？

我正在尝试获取页面上所有 p 元素的文本颜色和背景颜色：

这打印：

但是，如果我继续使用 chrome 并检查第一个 p 元素计算样式，它会显示：

这应该让我获得“计算”风格，那么为什么不这样做呢？我在这里想念什么？它应该打印brackground-color: rgb(67, 65, 62)

尝试设置水平滚动（使用 inline-flex）我遇到了以下问题：

无法在滚动 div 周围获得填充。试图理解为什么，似乎简单地添加子项的宽度会给出一个比计算出的父项宽度大的数字（远）。

https://jsfiddle.net/jniac/vv9zhcj3/

var w = parseFloat(getComputedStyle(div).width); 2062px > 1684.19px

结果非常惊人：虽然计算的样式给出了一个小的宽度值，但实际上 div 滚动的偏移量比计算值更大（滚动是否使用另一个宽度评估？），它仍然小于它应该是: 无法在右侧获得间距。

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

当我们使用这段代码时：

我得到：

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

因为我没有指定/覆盖。

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

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

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

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

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

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

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

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

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

我创建了一个 Angular 2 应用程序，其中包含一个组件，我试图将其 HTML 元素相对于另一个组件定位。为了计算准确的坐标，我需要知道浏览器呈现的我自己元素的宽度和高度。

我window.getComputedStyle(this.elementRef.nativeElement)用来获取这些属性。我注意到，在呈现页面时，属性会不断变化，直到页面呈现完成。为了了解任何更改并调整位置，我检查了ngAfterViewChecked组件方法中的值。

但是，当渲染导致新的计算样式属性时，它似乎没有ngAfterViewChecked被调用，因为我发现我的钩子不再被调用，即使计算的样式属性仍在变化。我假设 Angular 框架并非旨在检测这种变化。

我的第一次尝试是实现ngDoCheck钩子，但似乎在一段时间后以及在计算的样式属性具有其最终值之前，也没有调用这个钩子。我假设我还没有完全理解这个钩子应该在什么时候被调用。

我终于发现，如果我在 中实现一个setTimeout函数ngAfterViewChecked，这会导致稍后再次调用同一个钩子，即使我只传递了一个虚拟函数，例如：

但坦率地说，我不明白为什么会这样。有人可以向我解释一下 thesetTimeout和ngAfterViewCheckedhook 之间的联系吗？

虽然这似乎是一个有点肮脏的解决方法：检测和处理计算样式属性变化的正确“角度”方法是什么？

代码摘录：

I need to get computed background color a parent element to pass to an Image component. This is needed as I'm using the Contentful API to render images on the fly, and I have to supply a bg color query param.

Currently this isn't working:

Specifically, getComputedStyle reports Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Just trying to get the background-color successfully, eventually I would compare this to the default given in the background prop to the Image component.