Question

有没有一种方法可以将数据存储在CSS样式声明中？在我的测试中，它解析了自定义样式名称。

例如：

<style>
.MyElementData {
   font-family: "Arial";
   firstName: "John";
}
</style>

var css = '.MyElementData { firstName: "John"; font-family: "Arial";}';
var firstStylesheet = document.styleSheets[0];
var rules = firstStylesheet.cssRules;

// insert rule and get it's value
// returns ".MyElementData { font-family:"Arial" } ";
rules[firstStylesheet.insertRule(css)].cssText;

背景信息：

我需要一种简单且毫不干扰地在页面上存储基本基本数据的方法。

使用Javascript / JSON似乎很麻烦
嵌入XML似乎过分了
添加标签属性可能有效，但会增加混乱

因此，由于设置CSS已经成为我工作流程的一部分，因此这似乎是最简单的方法。我知道这是页面的样式和布局，但这实际上是存储数据的一种方式。数据恰好与样式和布局有关，但对我而言，没有理由不能存储其他数据。实际上，格式几乎与JSON相同。

但是现在看来，我的自定义样式（我的名称/值对）没有保存。

如果完全不可能在CSS中存储数据，则回答是可以的。我可能会在元素标签上使用data-attributeName。我仍然想知道是否有可能，是否还有其他人想出了办法。

Answer 1

不确定要真正了解您要查找的内容。是这样吗？

var infoFromCSS = getComputedStyle(document.body).getPropertyValue('--preferred_flavor');
alert(infoFromCSS);

:root {
  --preferred_flavor: strawberries;
}

有没有一种方法可以将数据存储在CSS样式声明或CSS规则中？

1 个答案: