我怎样才能捕获：IE8中的内容之后？

Question

I am applying an :after pseudo element to the body displaying the name of my media query breakpoint like so:

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

The reason for doing this can be found here: http://adactio.com/journal/5429/

I want to get the content value of :after using javascript in IE8.

This is how i am doing it for other browsers:

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

But IE8 does not support getComputedStyle() , i know it supports currentStyle instead, but after a bit of trying i was unable to use it correctly.

This is the kind of thing i was trying with no success:

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

Anybody know how to do this?

Edit: After BoltClock's note i have now changed my css to this (one semi colon):

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

Before using two the content was not even appearing in IE8, so it would have had nothing to return. Unfortunately i still can't get IE8 to return the content.

I am trying this:

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

I get nothing, but if i change 'content' to some other property like 'backgroundColor' it will alert something. So i'm thinking that even though msdn lists content as one of the available properties of currentStyle http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx it does not actually return it, unless i'm doing something else wrong.

Answer 1

After a lot of trying i've come to the conclusion that it is not possible. But thankfully i have found a js script which is achieving exactly what i was after.

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

As well as using Jeremy Keith's technique of putting the breakpoint label in the body:after they have put the breakpoint label in font-family on the html element. This enables support for ie8 and some cases where android was not able to return the :after content either.

Answer 2

From IE7 to IE11, you can "create your own CSS Properties", and just access them by using the currentStyle object

Then a solution is to create a "fake content property"

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

I called it "-ms-content" for convenience, now your JavaScript code for IE should be:

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

You must access "your own property" by using the brackets: currentStyle[{String}] otherwise you will get an empty string