how to add class name based query string using javascript

Question

I'd like to make my textarea font family, font size, color different based on query string with javascript. I am not a javascript expert. I hope anyone able to help me to.

EXAMPLE URL: http://www.domain.com/?color=#000&size=32px&fontfamily=serif

So it must generate css like:

textarea {font-family:serif;font-size:32px;color:#000}

Is that seems imposibble done using javascript or jquery?

possible duplicate of [How can I get query string values in JavaScript?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Kelly J Andrews, Jan 12 '14 at 11:19

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Although this is a seemingly simple question - accessing query string values in javascript is not directly straightforward. See this question for many answers of how to access them: How can I get query string values in JavaScript?

For the next part, I'm going to work based on the assumption that you're using PHP and have the following added somewhere to give easy access to the query strings. You can change this according to whatever method you prefer to gain access to query paramater values.

<script>window.$_GET = <?php echo json_encode($_GET); ?>;</script>

Next part of this question is how to create the css rules from those query paramaters. There's another Stack Overflow question answering this as well: How to dynamically create CSS class in JavaScript and apply?

Using the method from the accepted answer there here's your code - untested so there may be some minor typos.

var css = 'textarea {';
if ('font' in $_GET) css += 'font-family:'+$_GET.font+';';
if ('size' in $_GET) css += 'font-size:'+$_GET.size+';';
if ('color' in $_GET) css += 'color:'+$_GET.color+';';
css += '}';

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);

Also, note your URL is malformed. It should be

http://www.domain.com/?color=#000&size=32px&fontfamily=serif

not

http://www.domain.com/?color=#000?size=32px?fontfamily=serif

Given the context it makes far more sense to use a `#` URI fragment - styling doesn't and shouldn't have anything to do with back-end code. This way you'd have more flexibility in devising whatever format you want to serialise the data. — Emissary, Jan 12 '14 at 11:36
Good point - URL fragment definitely would be a good alternative for this I think. — Joel Cox, Jan 12 '14 at 11:41

score 0 · Answer 2 · answered Jan 12 '14 at 11:35

As you're not using valid CSS properties in your querystring, and it's not even a valid querystring, you have to first change the querystring as key/value pairs are seperated with & not ?, and then use a map to get proper CSS properties.

Once that is done, it's just a matter of seperating the key/value pairs, and iterating over elements to apply the styles

var cssMap = {
    color: 'color',
    size : 'fontSize',
    fontfamily : 'fontFamily'
}

function applyCSS(selector, qs) {
    var props  = qs.split('&'),
        elems  = document.querySelectorAll(selector),
        styles = {};

    for (var i=props.length; i--;) {
        var parts = props[i].split('=');
        styles[cssMap[parts[0]]] = parts[1];
    }

    for (var j=elems.length; j--;) {
        for (var style in styles) {
            elems[j].style[style] = styles[style];
        }
    }
    return styles;
}

applyCSS('textarea', window.location.search);

FIDDLE

msapkal · Answer 3 · 2014-01-12T14:04:28.563

Hope this helps.

function getQueryString() {
            var query_string = {};
            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 (typeof query_string[pair[0]] === "undefined") {
                    query_string[pair[0]] = pair[1];
                } else if (typeof query_string[pair[0]] === "string") {
                    var arr = [ query_string[pair[0]], pair[1] ];
                    query_string[pair[0]] = arr;
                } else {
                    query_string[pair[0]].push(pair[1]);
                }
            } 
            return query_string;
        }
var queryString = getQueryString();
var sColor = queryString.color;
var sSize = queryString.size;
var sFont = queryString.fontfamily;


var textAreaList = document.getElementsByTagName("textarea");

for(var i=0; i < textAreaList.length; i++){
    var el = textAreaList[i];
    el.style.color = sColor;
    el.style.fontSize = sSize;
    el.style.fontFamily = sFont;
}

how to add class name based query string using javascript

3 Answers3