如何有针对性的信的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; 

我增加了一个颜色上的目标信，但我没有一个想法如何添加保证金。我想在目标信函上添加保证金，例如margin = -20px;。我是JavaScript的新手，我希望有人能帮忙。由于

这里是我的JSFiddle

编辑：

我有这样的字体不好看的字母间距。我不想在我的html中使用span类，因为我不想在每一个页面或手稿上手动执行。

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

Answer 1

追加一些span element.Then使用内联style或class名称与CSS

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;

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

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

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>

应用的样式为span元素0

Answer 3

您可以使用CSS属性letter-spacing对<span>标记进行应用来完成此操作。

这里我的jsfiddle兄弟 - >http://jsfiddle.net/f6zn0svk/

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

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