Question

我正在编写一个chrome扩展，它操作页面的样式表，并希望在样式表本身中存储一些额外的信息。简单地用值创建“伪造”属性然后读取它们（即使用styleElem.sheet.cssRules）对我来说是否合法？

即，

.myclass {
   background-color: yellow;
   bogus-property: 10;
}

thaks！

Answer 1

通常使用自定义属性会被CSSStyleDeclaration忽略并且无法读取。

但只要您使用受支持的浏览器，并且知道属性名称，就可以使用带前缀Custom Properties：前缀为双短划线--的属性，并且意味着与{{一起使用3}} css功能。

例如：

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

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

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

请注意，如果您使用的是外部链接的css文件，则需要在其上设置了属性的元素上使用getPropertyValue()。因为外部css的样式声明是不可读的。

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

演示

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

body {
  --custom-property:30px;
  --other-property:url('some.jpg');
  font-size:var(--custom-property);
}

Custom properties should be printed in console log of supporting browsers

Answer 2

来自CSS 3规范：https://www.w3.org/TR/css-syntax-3/#style-rules

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

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

Answer 3

（从评论中移出）

你可以使用伪造的前缀 - 不了解它们的浏览器会忽略前缀。

就像-webkit-justify-content是一个webkit特定的justify-content定义（通常是在标准在所有浏览器中同样实现之前创建的），你可以组成像-mything-something这样的前缀这应该被所有浏览器忽略，因为它们都没有＃34; mything＆＃34;发动机...

CSS - 添加任意未知的属性名称是否合法？

3 个答案: