Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load CSS based on URL variable in HTML page

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?

like image 356
Ryan Avatar asked May 26 '11 23:05

Ryan


2 Answers

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>
like image 126
Ry- Avatar answered Nov 18 '22 08:11

Ry-


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);
}
like image 4
alex Avatar answered Nov 18 '22 08:11

alex