JavaScript 可以访问无效 CSS 属性的值吗？

JavaScript 可以检索无效的 CSS 属性值吗？

自定义 CSS 属性，由带有破折号前缀的名称表示，提供了一种定义和定义无效 CSS 属性的机制。访问应用程序中的独特样式。但是，如果这些自定义属性的值无效或浏览器无法识别，JavaScript 是否可以访问它们？

说明

CSSStyleDeclaration 对象公开了JavaScript 中的一个元素。当遇到无效的属性名称（例如“-my-foo”）时，该对象通常会跳过该属性并继续处理其他有效的属性。

DOM-Level-2 样式规范建议在一个声明块应该可以通过 CSSStyleDeclaration 接口访问，包括无效的声明块。然而，实际上，像 Chrome 和 Firefox 这样的浏览器并不支持这种行为。

尽管 JavaScript 无法直接访问无效 CSS 属性的值，但另一种方法是解析原始 CSS 文本。通过从相应的样式元素中提取样式属性，您可以手动识别并检索自定义属性的值，即使该值无效。

代码示例

The以下代码演示了如何解析原始 CSS 文本并检索“-my-foo”属性的值：

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\b${propertyName}:\s*(.+?)\b`, "i"))[1];

注意： 此方法需要一个正则表达式来匹配自定义属性名称并提取其值。它被认为是低级解决方案，可能不是适合所有场景的最有效或最合适的方法。

以上是JavaScript 可以访问无效 CSS 属性的值吗？的详细内容。更多信息请关注PHP中文网其他相关文章！