问题标签 [getcomputedstyle]

我希望检测哪些媒体查询处于活动状态 - 我正在使用 Bootjack，因此我使用的是默认断点

我希望能够getComputedStyle()在下面的示例中使用来获取“内容”属性的值 - 但我似乎没有得到正确的语法。我可以很高兴地获得一个元素的值——比如 body 上的 font-famly，而不是伪元素......

这就是我正在做的事情：

鉴于这个 css..

我的飞镖文件中有这个：

但 activeMediaQuery 始终为空。

我尝试过 ('after') 和 (':after') 以及其他任何奇怪而美妙的东西，但无济于事。

将变量 activeMediaQuery 设置为我正在使用的字体系列的值（不过对我来说没多大用处！）

我应该做什么？

我正在使用 getComputedStyle 收集元素的所有计算样式。但它会返回许多不必要的属性，如“动画持续时间”、“方向”、“时间模式”等，总共产生 200 多个属性。同时浏览器的 web 开发工具栏只显示相关的计算样式。我如何访问它们？

编辑：对不起，这个问题可能是这个问题的副本（尽管后者似乎专门与谷歌浏览器有关）。

我正在寻找比较两个 Elements 以找到它们计算样式的所有差异。为了做到这一点，我遍历了A的所有样式，并通过执行以下操作将它们与B进行比较：

我这样做的前提是 A 的长度总是B 的长度，但我纯粹是通过观察得出的。尽管不同浏览器的长度不同（考虑到新属性、供应商前缀版本等），但值似乎总是相同的：

当应用于随机 MDN 页面时，为所有元素生成以下内容：

现在，显然这不是所有浏览器的详尽列表，这让我回到我的问题，这些值对于某些元素是否会有所不同？在查看DOM Level 2文档和关于.getComputedStyle()

特别是，我会假设 和 之类的样式list-style-type应该content只适用于某些元素，只有在适用时才会出现在列表中。然而，无论如何，两者似乎都存在。

是否有某个文件可以验证我的断言？

我正在建立一个在中心有一个浮动 vimeo iframe 的网站。默认情况下，vimeo 容器设置为“display:none;”。单击播放按钮后，我使用 jQuery 淡入 iframe。

它适用于除 Firefox 之外的所有浏览器。我收到此错误：

这是我用来淡入包含 iframe 的 div 的代码：

我试过使用“display:block”和“display:table”，但它们都不能在 Firefox 中工作。

有没有其他人遇到过这个问题，或者知道是什么原因造成的？

如果在伪元素之前或之后设置了“内容”属性，我如何检查 javascript（使用 jQuery）？在 chrome 中，window.getComputedStyle(elem, '::before').getPropertyValue('content')当 'content' 设置为空字符串和未设置内容时，都返回一个空字符串。

我想到了一种解决方案：设置其他属性，例如宽度和高度，并检查计算的样式是否受到影响；但是，我希望尽量减少对 getComputedStyle 的调用次数。

谢谢

目标是在外部样式表中定义自定义 CSS 属性值。

摆弄它

外部 CSS：

标记：

CSS 规范中没有任何内容说自定义属性无效。但是，浏览器会将它们呈现为无效，但理论上它们应该仍然可以通过 window.getComputedStyle 或类似方式使用。Firebug 在样式窗格中显示自定义属性及其值，但将其标记为已覆盖。

以下片段来自：http ://www.quirksmode.org/dom/getstyles.html

JavaScript：

输出应该是字符串“myCustomValue”

是否可以从外部 URL 获取不同 HTML 标签的计算样式？

getComputedStyle 帮助我从自己的网页中获取计算样式，但我想从其他网页中提取不同元素的 CSS 值。

我试图找出例如：来自给定 URL（如http://www.smashingmagazine.com/ ）的 H1 元素的字体大小和 H2 元素的颜色。

这可能吗？（也许使用 NodeJS express 服务器和 ajax？）提前感谢您的帮助！

我试图了解 jQuery 在处理基于非像素的属性值（例如margin-top: 2em，甚至类似height: auto. 对于 IE9+，getComputedStyle()显然可以轻松提供此功能，但对于 IE8，currentStyle则不能。我正在尝试找到一个解决方案，以便我可以计算元素的总高度，包括所有浏览器 IE8+ 的 CSS 高度、填充、边框和边距。我遇到了以下答案，但我无法理解接受的答案中发生了什么。

使用 Javascript 的跨浏览器（IE8-）getComputedStyle？

我想知道是否有人可以解释这段代码中发生了什么？

我一直在做一个使用 jQuery.clone()方法的小项目。这样做的陷阱是在具有唯一标识符的 HTML 上使用它。因此，我继续实施getComputedStyle以查找原始唯一元素的样式属性，以便将其复制到克隆并在之后给它一个新的 id（是的，它会产生性能问题，但它是实验性的）。

根据 jQuery 规范，在克隆之后但在附加之前执行此操作将使操作发生在 DOM 之外（因此不会发生 id 'violation'）。但是，当我在克隆对象后尝试查找元素的样式属性时，我注意到跨浏览器的一些奇怪行为。在此之前，所有浏览器都返回相同的值，但在被克隆之后：

• Firefox - 无忧无虑，有趣的是，克隆的计算样式是实际的 CSS 值而不是计算数据（以像素为单位）。

• IE - 似乎有效，但价值不一定正确。

• Chrome - 不计算。这是一个例子：

http://codepen.io/anon/pen/zxqmNK?editors=011

有人知道这是一个错误还是以前见过类似的行为？在网络方面没有太多可做的事情（甚至 Stackoverflow 也不行）。提前感谢您的任何见解。

编辑 - 进行了更多测试，看起来 IE 的行为与 Chrome 相同。只是没有返回任何东西，而是将所有内容设置为“自动”。如果通过 using 访问克隆对象的样式，则.css()返回所有值0px（包括背景等属性）。似乎只有 Mozilla 将克隆的对象视为已应用任何样式。

我正在开发一个 javascript 函数（由 chrome 扩展使用），它将获取特定网页上显示的最大文本（来自 font-size 属性）。

它通过 ajax 调用获取指定页面的内容，并将调用返回的数据转换为 DomParser。遍历 DOM，我得到不同的元素，例如：

现在我编写了一个函数，它使用getComputedStyle. 我的逻辑是：

函数抓取大约 460 个不同的元素（测试页），但font-size 始终为 null。你能帮忙设置一下吗？ window.getComputedStyle返回所有遍历元素的 [object CSSStyleDeclaration] 对象。 Document.getAttribute('attribute-name')正在工作，但这只给出内联结果而不是计算结果。如果有其他建议可以达到相同的结果，我也愿意接受。

谢谢