Create CSS rule from query string

Question

Get query string

var queryString = window.location.search;

removes ? from beginning of query string

queryString = queryString.substring(1);

query string processor

var parseQueryString = function( queryString ) {
    var params = {}, queries, temp, i, l;
    // Split into key/value pairs
    queries = queryString.split("&");
    // Convert the array of strings into an object
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    }
    return params;
};

// query string object

var pageParams = parseQueryString(queryString);

// CSS variables

var target = pageParams.target;
var prop = pageParams.prop;
var value = pageParams.value;

// can't get to work -->

jQuery(target).css({
    prop : value,
});

I want to be able to supply a query like this one "?target=body&prop=display&value=none" and make the whole body disappear or target certain elements by their class.

vol7ron · Accepted Answer · 2014-08-03 21:44:24Z

2

You wouldn't be able to use prop as a key-variable for the object you're passing to .css(). In this case, it would translate to a literal string 'prop'. Instead, you'd have to do something like:

jQuery(target).css(prop,value);

Note: be careful about that trailing comma in that hash (after value). Some browsers will error at that point.

edited Aug 3, 2014 at 21:44

answered Aug 3, 2014 at 21:35

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

peter_the_oak · Accepted Answer · 2014-08-03 21:55:18Z

0

In order to create a css object which you can pass to jQuery, I suggest something like this:

// Create css obj
var cssObj = {};
cssObj[prop] = value;

After this, the code works fine to me. See the full solution here:

http://jsfiddle.net/q97DH/4/

I recommend removing the question mark with a regex - see comment below.

edited Aug 3, 2014 at 21:55

answered Aug 3, 2014 at 21:43

peter_the_oak

3,7405 gold badges28 silver badges41 bronze badges

4 Comments

vol7ron Over a year ago

The reason he is using substring is to remove the ?. For some reason I think that some browsers do not include the ?, so his method may not be the safest. Regardless, you should modify your regex (replace) so that it only removes question marks from the beginning of the string so that no subsequent question marks are removed: queryString.replace(/^\?/,'');

peter_the_oak Over a year ago

Jepp, I missed that line. I've edited the answer, thx for the hint :-)

peter_the_oak Over a year ago

About the regex: I agree, but I didn't use a regex. I just used replace. But still, question marks later in the string, maybe escaped, would be removed too, which could be critical. So let's be precise, I'll alter the fiddle.

vol7ron Over a year ago

Yeah :) I consider all replace to be regex. I might be wrong, but for some reason I thought that it uses regex under the hood, even when passing it a string as the match pattern. It's still not a bad idea to check if the first character is a question mark, since I still think some browsers include it, while others exclude it.

Collectives™ on Stack Overflow

Create CSS rule from query string

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related