使用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

请参阅以下示例 →

虽然我认为这种技术是不明智的，但这里是我开发的一些东西，我已经测试过它可以在 Chrome、FF、Safari 和 IE8 中工作。

首先，我选择了list-style-image用于存储元数据的属性，因为它可以包含url()参数中的任何字符串，但在任何正常情况下都不会在主体 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 字符串。我希望您有充分的理由想要这样做，因为我认为有更好的方法来存储元数据......但是就这样！

参见示例 →