Как я могу захватить содержимое :after в IE8?

Я применяю псевдоэлемент :after к телу, отображающему имя моей точки останова медиа-запроса, например:

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

Причину этого можно найти здесь: http://adactio.com/journal/5429/.

Я хочу получить значение содержимого :after, используя javascript в IE8.

Вот как я делаю это для других браузеров:

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 перечисляет содержимое как одно из доступных свойств currentStyle http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx на самом деле не возвращает его, если я не делаю что-то еще не так.


javascript css internet-explorer-8
person codekipple    schedule 18.10.2012    source источник
comment
IE8 также не поддерживает версию ::after с двойным двоеточием. Если вам нужна поддержка IE8, используйте :after.   -  person BoltClock    schedule 18.10.2012
comment
Спасибо, я надеялся, что это будет причиной того, что я не смог получить значение :after content, но, увы, я все еще не могу заставить ie8 что-либо вернуть.   -  person codekipple    schedule 19.10.2012
comment
Вероятно, потому что :after{} не считается собственным стилем элемента. Есть ли шанс, что вы можете использовать что-то вроде document.styleSheets[0].cssRules?   -  person Passerby    schedule 19.10.2012
comment
Боюсь, я тоже не смог получить это с помощью document.styleSheets.   -  person codekipple    schedule 19.10.2012
comment
Примете ли вы решение с jQuery?   -  person salih0vicX    schedule 22.10.2012
comment
Я думаю, это может вам помочь: stackoverflow.com/questions/5041494/   -  person salih0vicX    schedule 22.10.2012
comment
Да, я бы принял ответ jquery, но, насколько мне известно, jquery не может получить содержимое псевдоэлементов.   -  person codekipple    schedule 24.10.2012
comment
Пожалуйста, смотрите ссылку, которую я разместил в исправленном ответе.   -  person salih0vicX    schedule 25.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

После долгих попыток я пришел к выводу, что это невозможно. Но, к счастью, я нашел js-скрипт, который достигает именно того, что мне нужно.

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

А также с использованием техники Джереми Кейта по размещению метки точки останова в теле: после того, как они поместили метку точки останова в семействе шрифтов в элементе html. Это включает поддержку ie8 и некоторых случаев, когда Android также не может вернуть содержимое :after.

person codekipple    schedule 30.10.2012

arrow_upward
0
arrow_downward

От IE7 до IE11 вы можете «создавать свои собственные свойства CSS» и просто получать к ним доступ с помощью объекта currentStyle.

Тогда решение состоит в том, чтобы создать «свойство поддельного контента».

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

Я назвал его "-ms-content" для удобства, теперь ваш код JavaScript для IE должен быть таким:

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

Вы должны получить доступ к «своему собственному свойству» с помощью квадратных скобок: currentStyle[{String}] иначе вы получите пустую строку

person user123123123    schedule 04.06.2016