如何在javascript中读取Psuedo类的CSS属性 [英] How to read CSS property of Psuedo class in javascript

问题描述

我搜索过SO和googled，有很多关于如何读取CSS属性的答案，但是没有允许读取伪类属性的答案。

I've searched SO and googled for this and there are many answers on how to read CSS propeties but non that allow the reading of a pseudo class property.

我已经使用以下，以允许我轻松地重用某些页面（固件/配置上传）在一些产品。

I have used the following to allow me to easily reuse certain pages (firmware/config upload) on a number of products.

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

然后

<span class="productname" />

在html中插入正确的名称。

in the html to insert the correct name.

目前当发送固件更新到服务器时，在客户端浏览器上没有检查，服务器返回[请重新启动到contunue ...]或[这不是一个[产品名称]更新文件]。你可以想象固件更新可能相当大，如果通过3G传输需要一些时间。

Currently when sending a Firmware update to the Server no check is done on the client browser and the server returns [please reboot to contunue...] or [this is not a [productname] update file]. As you can imagine the firmware updates can be quite large and if transfered over 3G take some time.

我想从CSS获取产品名：before pseudo class允许我在检查上传文件名之前发送它。我已实施此 JS小提琴来说明问题。

I want to get the productname from the CSS :before pseudo class to allow me to check the upload file name before send it. I have implemented this JS Fiddle to illustrate the issue.

我试图将content属性直接放在.productname类（作为复制占位符）和FF，Opera和Safari将读取这个，但你猜测它IE返回undefined。

I have tried putting the content property on the .productname class directly (as a copy placeholder) and FF, Opera and Safari will read this but you guessed it IE returns undefined.

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

I know I can use a global var in JS and might have to do that but I'd rather have it defined in one place to avoid potential mistakes.

所有人都知道如何（或解决方法）读取属性：pseudo CSS类？

So does anyone know how to (or workaround ) read properies of the :pseudo CSS classes?

更新

由于我无法获得IE8的解决方案，改为使用以下代码。

Since i cant get a solution for IE8, I've changed to using the following code instead.

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

参考此网站 IE
中的动态SCRIPT和STYLE元素

with reference to this site Dynamic SCRIPT and STYLE elements in IE

推荐答案

，您可以使用 window.getComputedStyle 。但是，回答注意到某些浏览器可能不支持此操作，因此轻轻地踏上。 这里是演示

you can use window.getComputedStyle. however, an answer notes that some browsers may not support this, so tread lightly. 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);
    });
});​

这篇关于如何在javascript中读取Psuedo类的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！