I have a span with inner span and I'm trying to get the first character of the inner span (t) and change its color. I tried to do that with many way with both JavaScript and jQuery and it doesn't work

// with javascript    

var index = document.getElementById('spa');
var indexsl = index.slice(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.substring(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.charAt(0, 1);
indexsl.style.color = "f00"; //doesn't work


// with jQuery

var index = $('.design span').charAt(0);
index.css('color', '#f00') // doesn't work

var index = $('.design span').substring(0, 1);
index.css('color', '#f00') // doesn't work

var index = $('.design span').slice(0, 1);
index.css('color', '#f00') // doesn't work

<script src=".1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span id="spa">Teodor Victor</span></span>

I have a span with inner span and I'm trying to get the first character of the inner span (t) and change its color. I tried to do that with many way with both JavaScript and jQuery and it doesn't work

// with javascript    

var index = document.getElementById('spa');
var indexsl = index.slice(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.substring(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.charAt(0, 1);
indexsl.style.color = "f00"; //doesn't work


// with jQuery

var index = $('.design span').charAt(0);
index.css('color', '#f00') // doesn't work

var index = $('.design span').substring(0, 1);
index.css('color', '#f00') // doesn't work

var index = $('.design span').slice(0, 1);
index.css('color', '#f00') // doesn't work

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span id="spa">Teodor Victor</span></span>

• javascript
• jquery
• html
• css

• 2 Em index is an object, not an array. And you cannot assign a style to it – Jonas Wilms Commented Sep 28, 2016 at 21:00
• Javascript strings don't have styles. HTML has styles. You can't just cut a character from a string and give it a style. You would need to add tags to your dom that wrap your character (span would be the obvious choice) and assign a style to that tag – Matt Burland Commented Sep 28, 2016 at 21:02

5 Answers 5

Or you can skip the JavaScript and use CSS

span.design > span::first-letter {
  color:red;
}

span {
  display:inline-block;
}

<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

What you want is charAt.

var str = 'some string';
console.log(str.charAt(0)); // return 's'

You need to replace the html:

ind=index.innerHTML.split("");
ret="<span class='red'>"+ind.first()+"</span>"+ind.join("");
index.innerHTML=ret;

You can get first character, insert it with a different font color and then add rest of the content:

var span = $('.design span');
var html = span.html();

span.html("<span style='color:red;'>"+ html.charAt(0)  +"</span>" + html.substring(1,html.length));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

Did you try like this ?

var header = $('.design span').text().charAt(0);
index.css('color','#f00');

Or

var header = $('.design span').text().substring(0,1);
index.css('color','#f00');