Как мога да заснема :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;
}

Преди използването на две съдържанието дори не се появяваше в 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, но уви все още не мога да накарам 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

Както и използването на техниката на Jeremy Keith за поставяне на етикета на точката на прекъсване в тялото: след като са поставили етикета на точката на прекъсване във font-family на 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