How can i apply css when a query string is used?

Question

What i want to do is (at the end of the body) check for a query string and apply css depending on what it is.

www.example.com Will do nothing

www.example.com/example--location/example.html?theme=Red will add the 'red' css

www.example.com/example-path/example2.html?theme=yellow will ass the 'yellow' css

Also, if possible, i need the theme to follow them to other urls on my site when they click a link/tab.

@Biswas I have never worked with QueryStrings, I know how to use them in .asp, however I need to do this in html/javascript. — Austin Collins, Feb 12 '15 at 16:38
you can refer to this post http://stackoverflow.com/questions/19491336/get-url-parameter-jquery — Biswas, Feb 12 '15 at 16:39
Why did you accept my answer then unaccept it (and downvoted it maybe)? It is working fine and addresses all the points in your question. — MrUpsidown, Feb 13 '15 at 07:57
@MrUpsidown I can't downvote(Note my reputation), and I managed to find a solution that suits my needs. — Austin Collins, Feb 15 '15 at 18:54

score 1 · Answer 1 · answered Feb 12 '15 at 16:54

1

Use a Javascript function to retrieve qs paramaters window.location.search then parse them to check that the one you want is there, then change the stylesheet reference in your HTML using getElementById.

answered Feb 12 '15 at 16:54

user4560259

59
3

ksbg · Answer 2 · 2015-02-12T17:29:18.613

You'll at least need JavaScript for that.

First you need a function that can read the variables in the URL:

function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){
          return pair[1];}
      }
   return(false);
}

Now let's say you want to change the css of the element with id element1

if(getQueryVariable("theme") == "red") {
    document.getElementById("element1").className = "redClass";
} elseif(getQueryVariable("theme") == "yellow") {
    document.getElementById("element1").className = "yellowClass";
}

Of course you need to create the css classes (in this example redClass and yelloClass) first, but that's pretty much how it could work out.

edit: As requested by OP, here's a working demo. JsFiddle apparently doesn't like GET parameters, so just copy it to an html file an try for yourself. ?theme=red will make the text red. ?theme=yellow will make the text yellow.

<style>
.redClass {
    color: red;
}

.yellowClass {
    color: yellow;
}
</style>

<div id="element1">This is a test</div>

<script>
function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){
          return pair[1];}
      }
   return(false);
}

if(getQueryVariable("theme") == "red") {
    document.getElementById("element1").className = "redClass";
} else if(getQueryVariable("theme") == "yellow") {
    document.getElementById("element1").className = "yellowClass";
}

</script>

Is there a chance of you posting an example where a box changes css depending on the tag? — Austin Collins, Feb 12 '15 at 17:06

score -1 · Answer 3 · answered Feb 12 '15 at 16:43

You'll need a function that will parse your URL parameters (query string) from the location.search property; then, once you have the parameter, apply that class to your <body> tag.

function getUrlParameters() {
  var params = {};
  if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
  }
  return params;
}

$(document).ready(function() {
  var theme = getUrlParameters().theme;
  if (theme)
    $("body").addClass(theme);
});

How can i apply css when a query string is used?

3 Answers3