如何有針對性的信的JavaScript

我在HTML中有這樣的加保證金如何有針對性的信的JavaScript

<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移動到左邊，因爲它在任何字中都有相同的間距。

來源

2017-05-29 Chris Tope

像這樣的事情？ http://jsfiddle.net/rvchwn6a/使用'margin：-20px;'似乎有點極端，因爲它會弄亂這封信，但我已經按照你的要求去做了。 – NewToJS

你想把*樣式*設置爲「第n」字嗎？如果是這樣，也許你可以查看這篇文章https://css-tricks.com/a-call-for-nth-everything/ TL; DR：':: nnth-word'來設計第n個單詞 – josec89

追加一些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>

來源

2017-05-29 12:56:26 prasanth

感謝您的快速回答！你有任何有關''+ str [i] +''的文檔嗎？ –

它與html元素的創建者相同，用於連接字符串和變量的'+'。引用此線程['追加字符串和varibale']（https://stackoverflow.com/questions/1288095/append-to-string-變量）和[span]（https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjhn4WzoJXUAhXGK48KHRt3CX8QFggmMAA&url=https%3A%2F%2Fwww.w3schools .com％2Ftags％2Ftag_span.asp＆usg = AFQjCNH7spvEYDZS2_kefeKwAAYf2EpXIA＆sig2 = RoWXHKtCJfRuXR-NsRPl6A） – prasanth

@prased cool！謝謝！ –

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

來源

2017-05-29 13:00:05

您可以使用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>

來源

2017-05-29 13:06:46

這不是一個很好的解決方案，因爲解決方案中的JavaScript不起作用，甚至在更正選擇器之後，對HTML的更改也會導致新問題。 – NewToJS

是啊總是同意，但我不知道作者是否真的需要Javascript解決方案。其實這個答案是很好的https://stackoverflow.com/a/44243143/5711528。 –

如何有針對性的信的JavaScript

回答

相關問題