如何在javascript中更改字符串中每个字符的边距?

时间:2013-05-21 12:23:42

标签: javascript colors character

我有一个字符串"Hello World!"

我想更改JavaScript中margin字中每个"Hello World!"个字符。 例如:

“H”字符的边距是5px;

“e”字符的边距是3px;

e.t.c

我该怎么做?

5 个答案:

答案 0 :(得分:1)

var color = ['#FF0000','#00FF00','#0000FF'];

window.onload = function()
{
  var div = document.getElementById('sample');
  var str = 'ABC';
  for(var i=0;i<str.length;i++)
  {
      var span = document.createElement('span');
      var text  = document.createTextNode(str[i]);
      span.style.color = color[i];
      span.appendChild(text);
      div.appendChild(span);
  }
}

<div id='sample'></div>

Sample Fiddle

看看上面的代码。它可能会帮助你。我在这里使用span的原因是我无法设置文本节点的样式,所以我能做的唯一方法就是将文本节点附加到范围

这里我只出现了三个字符。你可以对'n'个字符做同样的事情

答案 1 :(得分:1)

最好的方法是这段代码:

<script type="text/javascript">
  var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
</script>

效果很好!

答案 2 :(得分:0)

你需要的是fontcolor方法

<script>
var str = "Hello world!";
document.write(str.fontcolor("green"));
</script>

值得注意的是,fontcolor(“”)的参数也可以是十六进制数或rgb形式。 如果您还有其他问题需要评论。

http://www.w3schools.com/jsref/jsref_fontcolor.asp

答案 3 :(得分:0)

('.cls').each(function(){

 var str = $(this).text().split('');
 $(this).text('');

for(var i = 0; i < str.length; i++){
    if(i % 2 == 0){
        $(this).append('<span style="color:blue">' + str[i] + '</span>')
    }
    else{
        $(this).append('<span style="color:yellow">' + str[i] + '</span>')
    }
}
})

答案 4 :(得分:0)

类似的东西:

str = "Hello world!";
arr = str.split('');
document.write(arr[0].fontcolor("yellow")+arr[1].fontcolor("red")
+arr[2].fontcolor("blue"));