How can I capture: after content in IE8?

Question

I apply the :after pseudo-element to the body displaying the name of the breakpoint of my media request as follows:

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

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

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

Here's how I do it for other browsers:

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

But IE8 does not support getComputedStyle() , I know that it supports currentStyle instead, but after several attempts I could not use it correctly.

This is what I tried without success:

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

Does anyone know how to do this?

Edit: After the BoltClock note, I now changed my css to this (one half-ton):

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

Before using the two, the content did not even appear in IE8, so it would have nothing to return. Unfortunately, I still cannot get IE8 to return content.

I am trying to do this:

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

I get nothing, but if I change the 'content' to another property, like 'backgroundColor' , it will warn something. Therefore, I think that although msdn lists the content as one of the available currentStyle properties http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx , it does not actually return it if I do not do something else wrong.

Answer 1

After many attempts, I came to the conclusion that this is impossible. But, fortunately, I found a js script that achieves exactly what I was after.

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

Also, using Jeremy Keith's technique to put a breakpoint label in the body: after they put a breakpoint label in the font family on the html element. This allows you to support ie8 and some cases where android was unable to return: after the content.

Answer 2

From IE7 to IE11, you can “create your own CSS properties” and simply access them using the currentStyle object

Then the solution should 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 with parentheses: currentStyle [{String}], otherwise you will get an empty string