How to add margin on targeted letter javascript

Question

I have this in html

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

I also have this in 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;

I added a color on the targeted letter but I don't have an idea how to add a margin. I want to add margin on the targeted letter like margin = -20px;. I'm new to javascript and I'm hoping someone could help. Thanks

Here's my JSFiddle

Edit:

I have this font that doesn't look good on letter spacing. I don't want to use a span class in my html since I don't want to do it manually on every single page or post that I make.

For example: I want to move all i's to the left since it has the same spacing in any word.

Something like this? http://jsfiddle.net/rvchwn6a/ using `margin:-20px;` seems a little extreme as it will mess up the letter but I have it doing what you asked for. — NewToJS, May 29 '17 at 12:57
Are you trying to set *style* to the `nth` word? If so, maybe you could check this article https://css-tricks.com/a-call-for-nth-everything/ TL;DR: `::nth-word` to style the nth word — josec89, May 29 '17 at 12:59

prasanth · Accepted Answer · 2017-05-29T13:01:42.840

1

Append with some span element.Then apply the style for that span element using inline style or class name with 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>

edited May 29 '17 at 13:01

answered May 29 '17 at 12:56

prasanth

22,145
4
29
53

thanks for the quick answer! do you have any documentation for that '' + str[i] + ''? – Chris Tope May 29 '17 at 13:40
Its same as html element creator and `+` used for concatenate the string and variable .refer this thread [`append with string and varibale`](https://stackoverflow.com/questions/1288095/append-to-string-variable) and [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 May 29 '17 at 13:54

score 0 · Answer 2 · answered May 29 '17 at 13:00

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>

score 0 · Answer 3 · answered May 29 '17 at 13:06

0

You can accomplish this with the CSS property letter-spacing apply on a <span> markup.

Here my jsfiddle bro --> http://jsfiddle.net/f6zn0svk/

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

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

answered May 29 '17 at 13:06

Rémy Testa

897
1
11
24

This isn't a very good solution since the javascript in your solution doesn't work and even after correcting the selector your changes to the HTML cause new issues. – NewToJS May 29 '17 at 13:09
Yeah totaly agree but I dont know if the author really need a Javascript Solution. Actually this answer is the good one https://stackoverflow.com/a/44243143/5711528. – Rémy Testa May 29 '17 at 13:20

How to add margin on targeted letter javascript

3 Answers3