Looking to dynamically adjust the media attribute of a CSS link tag and execute a function after the new styles are applied.
Here's how my CSS stylesheet link tag looks:
<link href="print.css" rel="stylesheet" media="print">
In my JavaScript code, I aim to switch the media attribute from print to all, and then trigger a function once the updated styles take effect on my page.
The current approach involves checking and updating as follows:
if (myCSSlink.getAttribute("media") === "print") {
myCSSlink.setAttribute("media", "all");
myCSSlink.onload = () => {
//perform necessary tasks
};
}
I'm assuming that when the media attribute is modified, the CSS will reload. However, my code within the arrow function doesn't seem to be functioning correctly. What could be a better way to handle this situation?