How to load CSS using javescript

[kiddo]

Hi guys,

i want to ask, is it possible to load css using javascript ???

because i have 2 css files, 1 for the desktop and the other one for the mobile browser/touch device

[rosspenman]

It is indeed possible.

var s = document.createElement(‘link’);
s.setAttribute(‘href’, ‘style.css’);
document.head.appendChild(s);

But sometimes using JavaScript isn’t the best idea. Have you thought about using media queries instead?

[Kitty Giraudel]

Seconded. Use media queries instead of JavaScript.

[rosspenman]

Here’s an introduction to media queries that Chris wrote: https://css-tricks.com/css-media-queries/

[kiddo]

@rosspenman and @HugoGiraudel, thanks a lot guys.

[Paulie_D]

The issue here is that there are two CSS files targeted specifically for different environments, desktop & mobile.

Media queries could reduce this to a single CSS file but if the separate files are required then there is no reason that the ‘media query’ couldn’t be in the head of the page to load the css file appropriate to the screen/device width.

Something like:

[Paulie_D]

media = all will media types of which there are many.

If you want to limit it to screen devices (say you don;t want it for printing purposes) then you could change it to media=”screen”.

[kiddo]

@Eric, why did you say “I disagree using css is many ways better”, can you explain it a little bit ?

i’m still new so there’s many thing i must learn

@Paulie_D thanks for the answer

[Author]

Posts