7

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.

4

2 回答 2

1

经过大量尝试，我得出结论，这是不可能的。但幸运的是，我找到了一个 js 脚本，它完全符合我的要求。

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

以及使用 Jeremy Keith 将断点标签放在正文中的技术：在他们将断点标签放在 html 元素的 font-family 中之后。这启用了对 ie8 的支持，并且在某些情况下 android 也无法返回 :after 内容。

于 2012-10-30T11:58:42.143 回答
0

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

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

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

为方便起见，我将其称为“-ms-content”，现在您的 IE JavaScript 代码应该是：

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

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

于 2016-06-04T12:43:09.800 回答