如何将带有 css 和 js 的完整库加载到 html？

Question

Say i wrote some local library that contains js and css files (no html). This library has a js file with a class that get a DOM id as argument and load all css into that element independently.

I would like "share" that library, or just include it in my html page.

The only way I know currently, is to load each file from this folder separately like:

<link rel="stylesheet"  href="/lib/style.css"/>
<script src="lib/main.js"></script>

and so on.. which looks not clean and not right.

What is the right way to be able to load this library as a whole and everything inside , or at least all js inside, into an html page?

If I share this library, I don't want other devs to list and load each js/css .

Answer 1

You can use JavaScript to load CSS. Placing your script tag above the header section will load the CSS before your actual site.

Use a hosting like pastebin for some temporary CSS file hosting.

May not load the CSS fast but at the moment it's the solution I use for sharing my libraries.

<script>
         
        // Get HTML head element
        var head = document.getElementsByTagName('HEAD')[0];
 
        // Create new link Element
        var link = document.createElement('link');
 
        // set the attributes for link element
        link.rel = 'stylesheet';
     
        link.type = 'text/css';
     
        link.href = 'INSERTYOURLINKHERE';
 
        // Append link element to HTML head
        head.appendChild(link);
    </script>