如何在IE8中捕获:after内容？

Question

我正在应用一个:after伪元素到body上，显示我的媒体查询断点的名称，如下所示：

body::after {
  content: 'medium';
  display: none;
}

这样做的原因可以在这里找到: http://adactio.com/journal/5429/

我想在IE8中使用JavaScript获取:after的内容值。

这是我为其他浏览器做的方式:

var breakpoint = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

但是IE8不支持getComputedStyle()，我知道它支持currentStyle，但是经过一番尝试，我无法正确使用它。

以下是我尝试但没有成功的事情:

var breakpoint = document.body.currentStyle.getPropertyValue('content');

有人知道如何做到这一点吗？

编辑：在BoltClock的提示之后，我现在将我的CSS更改为以下内容（只有一个分号）：

body:after {
  content: 'medium';
  display: none;
}

在使用two之前，内容甚至无法在IE8中显示，因此它没有任何返回值。不幸的是，我仍然无法让IE8返回内容。

我正在尝试这个：

if (style = document.body.currentStyle) {
  for (var prop in style) {
    if (prop === 'content') {
      alert(prop);
    }
  }
}

我什么都没得到，但如果我将'content'更改为其他属性，如'backgroundColor'，它会弹出一些内容。因此，我认为即使msdn将content列为currentStyle的可用属性之一http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx，除非我做错了其他事情，否则它实际上不会返回它。

- codekipple

---

IE8不支持双冒号版本的::after。如果需要支持IE8，请使用:after。 - BoltClock

很抱歉，我也无法使用document.styleSheets获取它。 - codekipple

你会接受一个使用jQuery的解决方案吗？ - salih0vicX

我认为这可能会对你有所帮助：https://dev59.com/J2445IYBdhLWcg3wGWd7 - salih0vicX

是的，我会接受一个jQuery的答案，但据我所知，jQuery无法获取伪元素的内容。 - codekipple

Answer 1

经过多次尝试，我得出结论，这是不可能的。但幸运的是，我找到了一个 JS 脚本，正好实现了我想要的功能。

https://github.com/JoshBarr/js-media-queries

除了使用Jeremy Keith的技术将断点标签放在body:after中，他们还将断点标签放在html元素的font-family中。这使得ie8和某些情况下android无法返回:after内容的支持成为可能。

- codekipple

Answer 2

从IE7到IE11，您可以“创建自己的CSS属性”，只需使用currentStyle对象即可访问它们。

然后一个解决方案是创建一个“虚假内容属性”。

body:after
{
    content: 'medium';
    -ms-content: 'medium';
}

为了方便，我称其为“-ms-content”，现在你的IE JavaScript代码应该是：

document.body.currentStyle["-ms-content"] // RETURNS => 'medium'

你必须使用方括号访问“你自己的属性”：currentStyle[{String}]，否则将返回一个空字符串。

- user123123123