Question

我是javascript的新手，我并不完全明白如何修改此代码来设置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/

还可以看一下：escaped URL parameters statements if else switch

Answer 1

.each(function(){});函数中的变量不是自定义的，它们始终是id和value。

你的功能应该是这样的：

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

这是一个FIDDLE

最基本的是，你的哈希数组包含两个对象：

1）color {value =“red”}

2）background {value =“yellow}

每个函数迭代考虑那些，id将是第一次color广告第二次background

，该值将是第一次"red"广告次"yellow"

所以对于第一次迭代，例如，id ='color'和value ='red'，它将产生：

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

Answer 2

使用javascript函数styleDiv，您可以传递样式（style = value）和目标（DOM元素标记名称，id，类）的url字符串。它会找到这些目标，并设置样式。

感谢Banana使用element.style [property] = value，我不知道。

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>

使用转义的URL参数设置div样式

2 个答案: