如何在javascript中读取伪类的CSS属性

Question

我已经搜索过 SO 并在 Google 上搜索过，关于如何读取 CSS 属性有很多答案，但不允许读取伪类属性。

我已使用以下内容让我可以轻松地在许多产品上重复使用某些页面（固件/配置上传）。

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

然后

<span class="productname" />

在 html 中插入正确的名称。

目前，当向服务器发送固件更新时，不会对客户端浏览器进行检查，服务器会返回 [请重新启动以继续...] 或 [这不是 [产品名称] 更新文件]。可以想象，固件更新可能非常大，如果通过 3G 传输需要一些时间。

我想从 CSS :before 伪类中获取产品名称，以便在发送之前检查上传文件名。我已经实现了这个JS Fiddle 来说明这个问题。

我曾尝试将 content 属性直接放在 .productname 类上（作为副本占位符），FF、Opera 和 Safari 会读取此内容，但您猜它 IE 返回未定义。

我知道我可以在 JS 中使用全局变量并且可能必须这样做，但我宁愿将它定义在一个地方以避免潜在的错误。

那么有人知道如何（或解决方法）读取 :pseudo 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);
} );

参考本站Dynamic SCRIPT and STYLE elements in IE

Answer 1

您可以使用window.getComputedStyle。但是，an answer 指出，某些浏览器可能不支持此功能，因此请谨慎行事。 here's a demo

<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);
    });
});​