Javascript CSS-添加任意未知属性名称合法吗？

我正在编写一个chrome扩展，它处理页面的样式表，并希望在样式表中存储一些额外的信息。我简单地用值创建“伪”属性，然后读取它们（即使用

stylelem.sheet.cssRules

）合法吗

即

萨克斯

来自CSS 3规范：

未知CSS属性或其值与属性定义的语法不匹配的声明无效，必须忽略。样式规则内容的有效性对样式规则本身的有效性没有影响

因此，浏览器必须忽略它不理解的内容，但不能因此而拒绝周围的属性。

（从注释中移动）

---

你可以使用假前缀——不理解前缀的浏览器会忽略前缀

---

与-webkit justify content一样，它是一个特定于webkit的justify content定义（通常是在标准在所有浏览器中平等实施之前创建的），您可以创建一个前缀，如

-虚构某些东西，所有浏览器都应该忽略它，因为它们都没有“虚构”通常使用自定义属性的引擎…
将被忽略，并且无法从CSSSTYLED声明中读取

但只要您使用受支持的浏览器，并且知道属性名称，就可以使用前缀：前缀为双破折号的属性
--
，用于css函数

例如：

body {
    --my-property:30px;
}

要通过javascript获取此值，请访问包含样式表的CSSStyleDeclaration，并使用完整的属性名调用

var style = document.styleSheets[0].rules[0].style;
console.log( style.getPropertyValue('--my-property') );

注意：如果您使用的是外部链接的css文件，则需要在其上设置了属性的元素上使用。因为外部css无法读取样式声明

var style = window.getComputedStyle(document.body);
console.log( style.getPropertyValue('--my-property') );

演示


var style=document.styleSheets[0]。规则[0]。样式；
log（style.getPropertyValue（'--customproperty'）；
log（style.getPropertyValue（'--other属性'）
正文{
--自定义属性：30px；
--其他属性：url（'some.jpg'）；
字体大小：var（--自定义属性）；
}
自定义属性应打印在支持浏览器的控制台日志中
您可以使用注释吗
/*这将不会被评估*/
（编辑：很抱歉，我没有注意到您也试图阅读它们，但我将保留此内容供任何人参考）如果您执行了
，则可能会加载该文件。myClass{/*确定*/}
。我注意到，当我的es lint对空实体感到愤怒时，它总是会平静下来。任意属性不会破坏样式表并阻止它们被读取（规则会被划掉），但我不相信它们会传递给JS中的任何样式对象。我很想看看别的！你不会因此而被捕，所以，我认为你不会受到样式警察的威胁：你可以使用一个假前缀-前缀会被不理解它们的浏览器忽略…谢谢！但“忽略”是什么意思？显然，它们不能被应用，但它们还能被阅读吗？ie作为前缀，如上面评论的Johannes 2？@kofifus:spec用于解析器，解析器读取所有数据。只要遵循有效的语法结构，它就会将其通读到分号或右大括号。当您提供的自定义值被分析并发现未知时，它将被简单地传递。但我不确定是否能找回它。
var style = window.getComputedStyle(document.body);
console.log( style.getPropertyValue('--my-property') );