在CSS链接后运行函数'的媒体属性已更改

Question

我正在尝试动态更改CSS链接标记的媒体属性，并且我需要在应用新CSS后运行一个函数。

我有一个CSS样式表链接标签

<link href="print.css" rel="stylesheet" media="print">

在我的JavaScript代码中，我想将media属性从print更改为all，在新的样式更改应用于我的页面后，我需要运行一个函数。

现在，我正在做以下工作：

if (myCSSlink.getAttribute("media") === "print") {
myCSSlink.setAttribute("media", "all");
myCSSlink.onload = () => {
//do some work
};
}

在这一点上，我假设media属性更改后，CSS将再次加载。但我在匿名箭头函数中的代码似乎不起作用。我该如何处理？

Answer 1

您应该分配一个onload处理程序来同时执行这两项操作-更改媒体属性并运行您的自定义onload函数。

function onLoad(link) {
link.setAttribute('media', 'all');
yourCustomFunction();
}

<link href="print.css" rel="stylesheet" media="print" onload="onLoad(this);">