style a div using escaped URL parameters

Question

I'm new in javascript and i don't exactly understand how to modify this code to style a div:

function getParameters() {
  var searchString = document.getElementById('input1').value,
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
    console.log(hash);
  //return hash;
    $.each(hash, function( color, background ) {
      document.body.innerHTML += color + background ;
    });
}

http://jsfiddle.net/Qmu5L/4/

Have a look also here: escaped URL parameters statements if else switch

you can use `$(body).css('color',color)`. Take a look [here](http://api.jquery.com/css/) — Michel, May 08 '14 at 18:22

Banana · Accepted Answer · 2014-05-08T18:29:20.493

the variables in the .each(function(){}); function are not custom, they are always id and value.

your function should go like this:

$.each(hash, function (id, value) {
    test_div.style[id] = value;
});

here is a FIDDLE

whats going on basically is, that your hash array contains two objects:

1) color {value = "red"}

2) background {value = "yellow}

the each function iterates thought those, the id will be first time color ad second time background

and the value will be first time "red" ad second time "yellow"

so for the first iteration for example, id = 'color' and value ='red' and it will produce:

test_div.style["color"] = "red";

have a look here: http://stackoverflow.com/questions/23562330/escaped-url-parameters-statements-if-else-switch — , May 09 '14 at 12:05

score 0 · Answer 2 · edited May 09 '14 at 10:26

With the javascript function styleDiv you can pass the url string of style (style=value) and the targets (DOM element tag name, id, class). It will find those targets, and set styles.

Kudos to Banana for using element.style[property] = value, i didn't know about it.

jsFiddle link

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Style a Div</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>


  <style type='text/css'>
    input[type=text] {width: 300px;}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){
styleDiv = function(paramString, target){
    param = paramString.split('&');
    if (param.length < 1)
        return false;
    for(i=0; i< param.length; i++){
        val = param[i].split('=');
        //jQuery(target).css(unescape(val[0]),unescape(val[1]));
        targets=document.querySelectorAll(target);
        for (t=0; t < targets.length; t++){
            targets[t].style[unescape(val[0])] = unescape(val[1]);
        }
    }
}

jQuery('#cmdSetStyle').click(function(e){
    console.log(styleDiv(jQuery('#txtParamStyle').val(),'#target'));
    return false;    
});

});//]]>  

</script>


</head>
<body>
  <form id="frmSendStyle" method="get">
    <input type="text" id="txtParamStyle" value="color=red&background=yellow" />
    <input type="button" id="cmdSetStyle" value="Set Style" />
</form>

<div id="target">
    Hello world
</div>

</body>


</html>

have look here: http://stackoverflow.com/questions/23562330/escaped-url-parameters-statements-if-else-switch — , May 09 '14 at 12:06

style a div using escaped URL parameters

2 Answers2

Linked