1

When I used just HTML and CSS files for my website the CSS effects got applied normally. But when I tried to run my website using node.js all the CSS effects got removed. How can I incorporate my CSS file into my app.js file?

over-engineer
  • 1,027
  • 1
  • 5
  • 15
Shubham_s
  • 21
  • 2
  • You should try googling your question before asking it on SO, and seeing if anything works for you. Also, if nothing works, we need to see what you've tried. Your code along with an explanation, if necessary. – VirxEC Nov 12 '20 at 12:42
  • Could you please clarify if this is about client-side or server-side JavaScript? Are you using a framework like Express? – over-engineer Nov 12 '20 at 13:18
  • 1
    @Rounin – netizen Nov 13 '20 at 08:45
  • Hah! Thank you, @netizen. My fingers were typing, but my brain was switched off. :-) – Rounin Nov 13 '20 at 09:11
  • Related: There is an initiative underway to make [CSSStyleSheet objects directly constructable](https://wicg.github.io/construct-stylesheets/) but we're not quite there yet. In the meantime, if you're looking to inject CSS with javascript, you pretty much need to create and populate a `` element. – Rounin Nov 13 '20 at 09:11
  • I did google it @VirxEC my code is very basic that is why i didn't upload the code. I am learning js for the first time – Shubham_s Nov 13 '20 at 13:29
  • Yes i am talking about server side JavaScript @over-engineer. And I am also using express by the way. – Shubham_s Nov 13 '20 at 13:30
  • guys I am new to posting on stack overflow so I am learning a lot hope you guys understand. thank you for all your answers. – Shubham_s Nov 13 '20 at 13:32
  • 1
    yes @Rounin yours solution works too but I needed a more general solution. thank you. – Shubham_s Nov 13 '20 at 13:34
  • I got the solution from the recommended similar answer turns out you need to create a public folder in your project and put your CSS files in that folder and use it using `app.use(express.static(path.join(__dirname, 'public')));` – Shubham_s Nov 13 '20 at 13:53

2 Answers2

3

. Use document.getElementsByTagName() method to get HTML head element.

. Create new link element using createElement(‘link’) method.

. Initialize the attributes of link element.

. Append link element to the head.

Example:

Create CSS file using name style.css:

.Setcolor { 
    
  color:blue; 

}

Use JavaScript to add CSS file:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <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 = 'style.css';  
  
        // Append link element to HTML head 
        head.appendChild(link);  
    </script>  
</head> 
  
<body> 
    <h2 class="Setcolor">TheColoris</h2> 
</body> 
  
</html>
Arvin
  • 146
  • 2
  • 14
  • Instead of constructing an array to get first element with getElementsByTagName, just access first directly as a standard document property: `document.head` – netizen Nov 13 '20 at 09:30
0

Put your CSS file under the public folder, if you are using a handlebar.

Public folder

If you are not depending on any handlebars, save the file separately and then call it using a <link> tag.

<link rel="stylesheet" href="styles.css"></link>
over-engineer
  • 1,027
  • 1
  • 5
  • 15
Sivaprasad
  • 119
  • 10