使用 CSS 返回元数据

发布于 2024-11-05 18:05:35 字数 604 浏览 0 评论 0原文

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

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

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

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

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

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

它们不会被退回。还有其他想法吗？

编辑：我最终采取了略有不同的方法。我没有添加标记，而是发出 AJAX 请求来获取样式表，并将其文本添加到

原文

I have a CSS stylesheet that's dynamically created on the server, and returned via a <link> tag. Is it possible to return any metadata with this stylesheet, that I could read with JavaScript?

(The use case: the stylesheet I return is a combination of several smaller ones. I want my JavaScript code to be able to detect which smaller ones were included.)

I considered adding some custom properties to an element:

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

But when I try to read these with:

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

they're not returned. Any other ideaas?

EDIT: I ended up taking a slightly different approach. Instead of adding a <link> tag, I made an AJAX request to get the stylesheet, and added its text to a <style> tag. This way I could use the HTTP response headers to include metadata. Of course, this won't work across domains, like a <link> tag does.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难以启齿的温柔 2024-11-12 18:05:35

查看以下示例→

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

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

然后，我为 getCompulatedStyle 实现了一个通用的跨浏览器函数，因为该函数并非在所有浏览器中都可用。

然后我解析了 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 of the following →

Though I think this technique is ill-advised, here's something I developed that I've tested to work in Chrome, FF, Safari and IE8.

First, I picked the list-style-image property to be used to store the meta data since it can contain any string in the url() parameter and yet wasn't going to be used under any normal circumstances in the body CSS.

Then I implemented a common cross-browser function to getComputedStyle since this isn't available in all browsers.

Then I parsed the return property to get only the data within the url(''), resulting in these functions:

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(/"$/,''));
};

If you need to store more than one piece of information you could comma-delineate the data or potentially even store a JSON string. I hope you have a good reason for wanting to do this as I think there are better ways to store meta data... but there you go!

See example →

回复收藏 0 原文