使用 CSS 返回元数据

Question

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

（用例：我返回的样式表是几个较小的样式表的组合。我希望我的 JavaScript 代码能够检测包含哪些较小的样式表。）

我考虑为元素添加一些自定义属性：

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

但是当我尝试阅读这些内容时：

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

他们没有被退回。还有其他想法吗？

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

Answer 1

See example of the following →

虽然我认为这种技术是不明智的，但这是我开发的一些东西，我已经在 Chrome、FF、Safari 和 IE8 中进行了测试。

首先，我选择了list-style-image 属性来存储元数据，因为它可以在url() 参数中包含任何字符串，但在任何正常情况下都不会在body CSS 中使用。

然后我为getComputedStyle 实现了一个通用的跨浏览器功能，因为这并非在所有浏览器中都可用。

然后我解析了return属性，只得到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 →

Answer 2

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

不过，您也许可以通过另一种方法询问这些样式： http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

Answer 3

我刚才问了related question。事实证明，您必须使用 javascript 手动解析样式表文本。我认为这不值得费心，并为我的问题找到了不同的解决方案。我猜你可以使用一些聪明的技巧，比如在虚假类上使用标准属性。