如何在JavaScript中将附加的样式链接用作CSSStylesheet

我试图在HTML页面中添加样式链接并插入规则

let linklength = document.head.querySelectorAll("link[rel=stylesheet]").length;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "./test.css");
document.head.appendChild(style);
let myStyle = document.styleSheets[linklength];
myStyle.insertRule(".red{color:red}");

但myStyle未定义，新样式未添加到document.styleSheets中。 我可以解决如下问题

let linklength = document.head.querySelectorAll("link[rel=stylesheet]").length;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "./test.css");
document.head.appendChild(style);
setTimeout(() => {
    let myStyle = document.styleSheets[linklength];
    myStyle.insertRule(".red{color:red}");
}, 5000);

但我想立即插入规则。

---

我已经将超时设置为0毫秒，但它不起作用。

问题是下载和应用刚刚添加的新样式表需要时间，您需要监听新链接的

load

事件，以便在加载新样式表时能够执行某些操作。
工作示例：

const link=document.createElement（“link”）；
link.href=”https://code.jquery.com/jquery-3.5.1.min.js"; //你的网址
log（document.styleSheets.length）；
link.rel=“样式表”；
document.head.appendChild（链接）；
addEventListener（“加载”，yourHandler）；
函数yourHandler（）{
log（document.styleSheets.length）；
removeEventListener（“load”，yourHandler）；
}

我不太熟悉以这种方式加载CSS，但我猜在代码尝试插入附加规则之前，您的CSS文件尚未完成下载，这意味着您需要一段延迟，允许下载完成，然后才能将规则添加到下载的样式表中。我建议不要用这种方式加载CSS。我不确定附加到现有样式表的目的，但这将实现使用javascript创建类的目标