如何在目标字母javascript

Question

我在html中有这个

<div id="content">
  <h1 class="entry-title">"Homepage SlideShow"</h1>
</div>

我在js中也有这个

var content = document.getElementById("content");

var entryTitle = content.getElementsByClassName('entry-title')[0];
      var str = entryTitle.innerHTML;
      var newTitle = "";
      for (var i = 0; i < str.length; i++) {
        if (str[i] == 'e') {
           newTitle += str.charAt(i).fontcolor("red");
        }
        else {
            newTitle += str[i];
        }
    }
    entryTitle.innerHTML = newTitle;

我在目标字母上添加了一种颜色，但我不知道如何添加边距。我想在目标字母上添加保证金，例如保证金= -20px ;。我是javascript的新手，我希望有人可以提供帮助。感谢

这是我的JSFiddle

编辑：

我的字体在字母间距上看起来并不好看。我不想在我的HTML中使用span类，因为我不想在每个页面或我发布的帖子上手动执行。

例如：我想将所有的i移到左边，因为它在任何单词中都有相同的间距。

Answer 1

附加一些span元素。然后使用内联style或class名称为css

应用该span元素的样式

＆＃13;

＆＃13;

var entryTitle = document.getElementsByClassName('entry-title')[0];
var str = entryTitle.innerHTML;
var newTitle = "";
for (var i = 0; i < str.length; i++) {
  if (str[i] == 'e') {
    newTitle += '<span class="add">' + str[i] + '</span>'
  } else {
    newTitle += str[i];
  }
}
entryTitle.innerHTML = newTitle;

＆＃13;

.add{
/*add your style here*/
color:red;
margin:-20px;
}

＆＃13;

<h1 class="entry-title">"Homepage SlideShow"</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

var content = document.getElementById("content");

var entryTitle = content.getElementsByClassName('entry-title')[0];
var str = entryTitle.innerHTML;
var newTitle = "";
for (var i = 0; i < str.length; i++) {
  if (str[i] == 'e') {
    newTitle += "<span style='margin: 20px;'>" + str.charAt(i).fontcolor("red") + "</span>";
  } else {
    newTitle += str[i];
  }
}
entryTitle.innerHTML = newTitle;

<div id="content">
  <h1 class="entry-title">"Homepage SlideShow"</h1>
</div>

Answer 3

您可以使用letter-spacing标记上的CSS属性<span>来完成此操作。

这里是我的jsfiddle兄弟 - ＆gt; http://jsfiddle.net/f6zn0svk/

.letter-spacing { letter-spacing: 10px; }

<h1 class="entry-title">"Hom<span class="letter-spacing">ep</span>age SlideShow"</h1>