Load CSS based on URL variable in HTML page

Question

I'd like to load a stylesheet when my URL variable contains "?view=full".

Is it possible to do this in HTML (i.e. not PHP)? If so, how?

Are you trying to have different CSS for a normal view and a print view? It may be better to use [CSS media types](http://www.w3.org/TR/CSS2/media.html), which allow you to specify different stylesheets for screen, mobile, and print. — josh3736, May 26 '11 at 23:36

Ry- · Accepted Answer · 2014-09-02T17:19:24.137

11

It’s not possible in pure HTML; you'd have to use either PHP or JavaScript. If you want to do it in JavaScript, you could put this in your <head> section:

<script>
if (window.location.search.indexOf('?view=full') === 0)
    document.write('<link rel="stylesheet" href="theStylesheet.css" />');
</script>

edited Sep 02 '14 at 17:19

answered May 26 '11 at 23:34

Ry-

199,309
51
404
420

@alex: That actually only applies to the ` – Ry- Jun 01 '11 at 02:31
How would this be doen with PHP? – Shae Jun 20 '19 at 15:24
@Shae: `` or something. `isset` might not be necessary, it’s been a while since I’ve written PHP. – Ry- Jun 20 '19 at 17:28

alex · Answer 2 · 2011-06-01T01:09:30.473

4

This will create the link element in your head element if that GET param is present.

if (window.location.search.search(/[?&]view=full(?:$|&)/) !== -1) {
    var link = document.createElement('link');
    link.type = 'text/css'; 
    link.rel = 'stylesheet';
    link.href = 'path/to/it.css';
    document.getElementsByTagName('head')[0].appendChild(link);
}

edited Jun 01 '11 at 01:09

answered May 26 '11 at 23:37

alex

438,662
188
837
957

That's incorrect - you need a `` element. ` – Ry- Jun 01 '11 at 00:37
@minitech Whoops, my mistake. I've fixed. – alex Jun 01 '11 at 00:37
Um... "nemesis"? Anyways, yes :) – Ry- Jun 01 '11 at 02:43

Load CSS based on URL variable in HTML page

2 Answers2