Как прочитать свойство CSS класса Psuedo в JavaScript

Question

Я искал SO и гуглил это, и есть много ответов о том, как читать свойства CSS, но не те, которые позволяют чтение свойства псевдокласса.

Я использовал следующее, чтобы позволить мне легко повторно использовать определенные страницы (загрузка микропрограммы / конфигурации) для ряда продуктов.

.productname:before
{
    content: "My Shiny New Product";
}

тогда

<span class="productname" />

в HTML, чтобы вставить правильное имя.

В настоящее время при отправке обновления прошивки на сервер в клиентском браузере не выполняется проверка, и сервер возвращает [пожалуйста, перезагрузите, чтобы продолжить ...] или [это не файл обновления [productname]]. Как вы можете себе представить, обновления микропрограммы могут быть довольно большими, и при передаче через 3G потребуется некоторое время.

Я хочу получить имя продукта из CSS: перед псевдо-классом, чтобы я мог проверить имя загружаемого файла перед его отправкой. Я реализовал эту JS Fiddle , чтобы проиллюстрировать проблему.

Я попытался поместить свойство content непосредственно в класс .productname (в качестве заполнителя копии), и FF, Opera и Safari прочтут это, но вы догадались, что IE возвращает undefined.

Я знаю, что могу использовать глобальную переменную в JS и, возможно, придется это сделать, но я бы предпочел, чтобы она была определена в одном месте, чтобы избежать потенциальных ошибок.

Так кто-нибудь знает, как (или обойти) прочитать свойства псевдо-классов CSS?

Заранее спасибо.

Обновление

Поскольку я не могу получить решение для IE8, я вместо этого переключился на использование следующего кода.

window.addEvent( "domready",
function()
{
  window.productName = "My Shiny New Product";      

  var def = '.productname:before { content: "'+window.productName+'"; }';

  var style = new Element("style");
  style.setAttribute( "type", "text/css" );
  if( style.styleSheet )
  {
     style.styleSheet.cssText = def;
  }
  else
  {
    style.innerHTML = def;
  }
  document.getElementsByTagName("head")[0].appendChild(style);
  document.getElementsByTagName("head")[0].appendChild(style);
} );

со ссылкой на этот сайт Динамические элементы SCRIPT и STYLE в IE

Answer 1

вы можете использовать window.getComputedStyle . однако ответ отмечает, что некоторые браузеры могут не поддерживать это, так что действуйте осторожно. вот демо

<span class="test" />
<span class="test" />
<span class="test" />

.test:before{
    content: "My Shiny New Product";
}

$(function() {

    //get all element class test
    var test = $('.test');

    //each of them, alert the content
    test.each(function() {
        var style = window.getComputedStyle(this, "before");
        alert(style.content);
    });
});​