AnswerBun.com

How to use just appended style link as CSSStylesheet in JavaScript

Stack Overflow Asked by webelf000 on August 5, 2020

I tried to add style link in an HTML page and insert rule

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}");

But myStyle is undefined and new style didn’t add in document.styleSheets.
I could solve as follows

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);

but I want to insert rule immediately.
I’ve already set timeout 0 milisecond but it didn’t work.

One Answer

The problem is it takes time to download and apply the new stylesheet that you've just added, you need to listen on load event of the new link so you'll able to do something when the new stylesheet loaded.
Working Example :

const link = document.createElement("link");
link.href = "https://code.jquery.com/jquery-3.5.1.min.js"; //your url
console.log(document.styleSheets.length);
link.rel = "stylesheet";
document.head.appendChild(link);
link.addEventListener("load",yourHandler);
function yourHandler(){
   console.log(document.styleSheets.length);
   link.removeEventListener("load",yourHandler);
}

Correct answer by Shawn Vn on August 5, 2020

Add your own answers!

Related Questions

Why NCat overs immediately if I call it by Popen?

1  Asked on February 9, 2021 by shkiperdesna

         

Understanding Generic Class implementation

3  Asked on February 9, 2021 by yeo

   

full join of the several data frames of nested data frame

2  Asked on February 9, 2021 by seyed-hosseini

     

JSON file in Index.html

0  Asked on February 9, 2021 by maria-rodriguez

   

Spring boot nested native sql query is not working

1  Asked on February 8, 2021 by shivam-kumar

       

How to access array outside of a function in javascript

1  Asked on February 8, 2021 by hamza-sayyid

       

Close PyQt Dialog without closing main programme

2  Asked on February 8, 2021 by gilly4297

       

Make a loop within for loop statement in Python

4  Asked on February 8, 2021 by papemoussa

       

Need help formatting pandas data frame from json file

2  Asked on February 8, 2021 by soscodehelp

     

regex with bs4 is splitting the results

1  Asked on February 8, 2021 by edison

     

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP