javascript – 使用CSS返回元数据

我有一个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>标签呢.

解决方法

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 →

原文地址：https://www.jb51.cc/js/156601.html