未捕获的 DOMException：无法在“CSSStyleSheet”上执行“addRule”：无法访问 StyleSheet 以插入规则
[英]Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule
问题描述
I got the following error when I was working on a project: "Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule"
我在处理项目时遇到以下错误：“未捕获的 DOMException：无法在 'CSSStyleSheet' 上执行 'addRule'：无法访问 StyleSheet 以插入规则”
Could someone help me fix my code, because I'm not sure why I'm getting this error.有人可以帮我修复我的代码，因为我不确定为什么会出现这个错误。
The head of my HTML document:我的 HTML 文件的头部：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plunder Data Research and Analysis</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
The line of JavaScript code that is giving the error:给出错误的 JavaScript 代码行：
styleSheet.addRule(".new-plunder-form-username:focus {border: 1.5px solid #75b4d9; box-shadow: 0 0 5px #75b4d9;}");
The styleSheet constant:样式表常量：
const styleSheet = document.styleSheets[0];
I found this similar question on Stack Overflow, but my stylesheets as you can see are already ordered with the stylesheet I'm trying to access first like it said to do.我在 Stack Overflow 上发现了这个类似的问题，但是如您所见，我的样式表已经与我尝试首先访问的样式表一起订购，就像它说的那样。
1 个解决方案
解决方案1
1 已采纳 2021-01-26 18:19:41
Make sure the styles.css exists on your server.确保您的服务器上存在styles.css 。 If it doesn't, that might be causing it to be inaccessible.如果没有，那可能会导致它无法访问。
Worst-case, you could create and insert another stylesheet.最坏的情况是，您可以创建并插入另一个样式表。
const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
styleSheet.textContent = ".new-plunder-form-username:focus {border: 1.5px solid #75b4d9; box-shadow: 0 0 5px #75b4d9;}";
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.