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()参数中的任何字符串，但在任何正常情况下都不会被使用。身体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手动解析样式表文本。我觉得这不值得麻烦，并为我的问题找到了不同的解决方案。你可以使用一些聪明的技巧，比如虚假类上的标准属性，我猜。

使用CSS返回元数据

3 个答案: