使用CSS返回元数据

我有一个CSS样式表，它是在服务器上动态创建的，并且通过<link>标签返回。是否有可能使用这个样式表返回任何元数据，我可以用JavaScript读取？使用CSS返回元数据

（用例：我返回样式表是几个较小的一个组合我想我的JavaScript代码能够检测其被列入较小的。）

我认为加入到了自定义属性元素：

body { 
    -my-custom-prop1:0; 
    -my-custom-prop2:0; 
}

但是，当我尝试阅读这些：

window.getComputedStyle(document.body)['-my-custom-prop1']

不是在返回他们。任何其他想法？

编辑：我最终采取了一个略有不同的方法。我添加了一个<link>标记，而不是添加<link>标记，而是发出AJAX请求来获取样式表，并将其文本添加到<style>标记中。这样我可以使用HTTP响应头来包含元数据。当然，这不会跨域使用，就像<link>标签一样。

来源

2011-05-06 JW.

哪些浏览器？（包括版本和操作系统） – hippietrail 2011-05-06 23:45:21

如果可能，我希望能够使用所有现代浏览器读取元数据。 – 2011-05-06 23:48:42

See example of the following →

虽然我认为是不明智的这项技术，这里的东西我开发了我测试过在Chrome，FF，Safari和IE8工作。

首先，我选择了用于存储元数据的list-style-image属性，因为它可以包含url()参数中的任何字符串，但尚未在正文CSS中正常使用。

然后我实现了一个通用的跨浏览器功能getComputedStyle，因为它不适用于所有浏览器。

然后我分析倒流性，仅保留url('')内的数据，导致这些功能：

var getStyle = function(el, cssprop) { 
    if (el.currentStyle) { 
     return el.currentStyle[cssprop]; 
    } else if (document.defaultView && document.defaultView.getComputedStyle) { 
     return document.defaultView.getComputedStyle(el, "")[cssprop]; 
    } else { 
     return (el.style) ? el.style[cssprop] : 0; 
    } 
}; 

var pullCSSMeta = function() { 
    var aMeta = getStyle(document.body, 'listStyleImage').split('/'), 
     meta = aMeta[aMeta.length - 1]; 

    return decodeURIComponent(meta.substr(0, meta.length - 1).replace(/"$/,'')); 
};

如果你需要存储超过一个信息，你可以用逗号界定的数据或甚至可能存储JSON字符串。我希望你有一个很好的理由想要这样做，因为我认为有更好的方法来存储元数据......但你去！

See example →

来源

2011-05-07 00:21:38 mVChr

我不明白你的意思。这太棒了。关于这一点唯一的事情是我可以找到每次文件加载时生成404的性能命中。 – sdleihssirhc 2011-05-07 00:26:54

的确如此，我忘了提及那部分，谢谢。做这样的事情感觉非常不好，但知道你能做到这一点很有趣。 – mVChr 2011-05-07 00:30:48

我接受这个答案，因为它最接近我所要求的。但我最终采取了不同的方法;看到我的编辑原来的问题。 – 2011-05-07 21:53:57

返回的对象实际上代表CSS 2.1使用的值，而不是计算值。 https://developer.mozilla.org/en/DOM/window.getComputedStyle

你也许能够通过另一种方法，虽然询问这些样式： http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

来源

2011-05-06 23:45:48 lod3n

我问一个related question前一阵子。事实证明，你必须用javascript手动解析样式表文本。我认为这不值得费心，并找到了解决我的问题的不同方法。你可以使用一些聪明的技巧，像假的类的标准属性会工作，我猜。

来源

2011-05-06 23:52:43

您是否可以访问文本？我试过linkEle。innerText，但它返回一个空字符串（至少在Chrome中）。 – 2011-05-07 00:07:42

使用CSS返回元数据

回答

相关问题