I am trying to add a style directly to the head on a HTML using JavaScript with nodes.
HTML head:
<head>
<title>New Accents Photography</title>
<meta charset="utf-8" />
<link href="na_base.css" rel="stylesheet" />
<link href="na_layout.css" rel="stylesheet" />
<script src="na_styler.js" async></script>
</head>
na_styler_js inlcudes the thumbStyles code to add the styling directly in the head itself. The fanceySheet code was also included since it is within the same function can could be interfearing. It is just a link to a style sheet in my files rather then its own style in the head itself.
// Adds link element to link to external stylesheet randomly
var styleNum = randInt(5);
var fanceySheet = document.createElement("link");
fanceySheet.setAttribute("href", "na_style_"+styleNum+".css");
fanceySheet.setAttribute("rel", "stylesheet");
fanceySheet.setAttribute("id", "fanceySheet");
document.head.appendChild(fanceySheet);
console.log("Random Style Sheet")
// Create a new style directly in the head element
var thumbStyles = document.createElement("style");
document.head.appendChild(thumbStyles);
thumbStyles.sheet.insertRule(
"figure#styleThumbs { \
position: absolute; \
left: 0px; \
bottom: 0px; \
} \
figure#styleThumbs img { \
outline: 1px solid black; \
cursor: pointer; \
opacity: 0.75; \
} \
figure#styleThumbs img:hover { \
outline: 1px solid red; \
opacity: 1.0; \
} \
", 0);
This results in the following error:
I can not figure out why this is happening. Nothing else in my code errors and it all works besides this error. Besides linking to other stylesheets, I have no other direct styles in the head besides trying to add thumbStyles.
I also tried directly targeting the list of the document style sheets to see if that works but I get the same error as above.
document.styleSheets[document.styleSheets.length-1].insertRule(
The page in total contains 7 external style sheets stored in the same folder. Five of them are style sheets that are responsible of changing the theme of the page.
When the user loads onto the page, a link element is created and then linked with a random themed style sheet. From their, the user can use 5 buttons to select between 5 different themes using 5 event listeners that are all added via JavaScript in some code not shown above.
Those buttons all are using the fanceySheet link element by changing the href. The other two style sheets are linked directly in the page head via the HTML.
